css와 li 그리고 스크립트를 이용한 세로 메뉴

 

 

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
  background-color: #f1f1f1;
}

.menu li {
  border-bottom: 1px solid #ccc;
}

.menu li:last-child {
  border-bottom: none;
}

.menu li a {
  display: block;
  color: #333;
  padding: 10px;
  text-decoration: none;
}

.menu li.active a {
  background-color: #175D91;
  color: white;
}

.menu li:hover a {
  background-color: #4CAF50;
  color: white;
}

.menu li.hover a {
  background-color: #36769E;
  color: white;
}

  <ul class="menu">
	<li class="active"><a href="#">메뉴1</a></li>
	<li><a href="#">메뉴2</a></li>
	<li><a href="#">메뉴3</a></li>
	<li><a href="#">메뉴4</a></li>
	<li><a href="#">메뉴5</a></li>
	<li><a href="#">메뉴5</a></li>
	<li><a href="#">메뉴5</a></li>
	<li><a href="#">메뉴5</a></li>
	<li><a href="#">메뉴5</a></li>
</ul>

var menuItems = document.querySelectorAll('.menu li a');

// Get the current page URL
const currentPage = window.location.href;

// Set the currentPage cookie or local storage
// Here, we will use local storage
localStorage.setItem('currentPage', currentPage);

// Check if the stored value exists and set the active class to the corresponding menu item
menuItems.forEach(function(item) {
  const storedValue = localStorage.getItem('currentPage');

  if (storedValue === item.href) {
    item.parentElement.classList.add('active');
  }

  // Remove active class from all items when clicked
  item.addEventListener('click', function() {
    menuItems.forEach(function(item) {
      item.parentElement.classList.remove('active');
    });

    // Add active class to clicked item
    this.parentElement.classList.add('active');

    // Store the current page URL
    localStorage.setItem('currentPage', this.href);
  });

  item.addEventListener('mouseover', function() {
    this.parentElement.classList.add('hover');
  });

  item.addEventListener('mouseout', function() {
    this.parentElement.classList.remove('hover');
  });
});

 

 

파라미터를 사용하는 게시판에서도 적용되게 '&'를 기준

var menuItems = document.querySelectorAll('.menus li a');

// Get the base part of the current page URL
const currentPageBase = window.location.href.split('&')[0];

// Set the currentPage cookie or local storage
localStorage.setItem('currentPage', currentPageBase);

// Check if the stored value exists and set the active class to the corresponding menu item
menuItems.forEach(function(item) {
  const storedValue = localStorage.getItem('currentPage');
  const menuItemBase = item.href.split('&')[0];

  if (storedValue === menuItemBase) {
    item.parentElement.classList.add('active');
  }

  // Remove active class from all items when clicked
  item.addEventListener('click', function() {
    menuItems.forEach(function(item) {
      item.parentElement.classList.remove('active');
    });

    // Add active class to clicked item
    this.parentElement.classList.add('active');

    // Store the base part of the current page URL
    const clickedItemBase = this.href.split('&')[0];
    localStorage.setItem('currentPage', clickedItemBase);
  });

  item.addEventListener('mouseover', function() {
    this.parentElement.classList.add('hover');
  });

  item.addEventListener('mouseout', function() {
    this.parentElement.classList.remove('hover');
  });
});