0

не могу разобраться, как сделать выпадающий список на пункт меню "Услуги" и при нажатие на Услуги- становился активным(фон зеленый, как и у остальных пунктов меню) , а выбранный подпункт видимый, а остальные подпункты светлого цвета

$(document).ready(function() {
  var offset = $('#fixed').offset();
  var topPadding = 10;
  $(window).scroll(function() {
    if ($(window).scrollTop() > offset.top) {
      $('#fixed').stop().animate({
        marginTop: $(window).scrollTop() - offset.top + topPadding
      });
    } else {
      $('#fixed').stop().animate({
        marginTop: 10
      });
    }
  });
});
.left-menu {
  background-color: #F4F4F4;
  min-height: 750px;
  width: 200px;
  float: left;
}
#gmenu ul {
  margin-top: 10px;
  width: 100%;
  list-style: none;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
#gmenu li {
  font-size: 13px;
  line-height: 1.8;
  /*font-weight:600;*/
}
#gmenu li a {
  display: block;
  /* Ссылка как блочный элемент */
  padding: 2px;
  /* Поля вокруг надписи */
  text-decoration: none;
  /* Подчеркивание у ссылок убираем */
  color: black;
}
#gmenu li a:hover {
  background-color: #02A511;
  color: white;
  cursor: pointer;
}
#gmenu li a.active {
  background-color: #02A511;
  color: white;
  cursor: pointer;
}
<div class="left-menu" id="gmenu">
  <ul class="menu" id="fixed">
    <li><a href="#">Главная</a>
    </li>
    <li><a href="#">Разработка сайтов</a>
    </li>
    <li>Услуги
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>

    </li>
    <li><a href="#">Наши работы</a>
    </li>
    <li><a>Акции</a>
    </li>
    <li><a href="#">Статьи</a>
    </li>
    <li><a href="#">Контакты</a>
    </li>
    <li><a>Хостинг</a>
    </li>
    <li><a>Услуги копирайта</a>
    </li>
    <li><a href="#">Вакансии</a>
    </li>
    <li><a href="#">Отзывы</a>
    </li>
    <li><a>О нас</a>
    </li>
  </ul>
</div>

2
  • чуток доработал ответ : так надо ? codepen.io/Geyan/pen/ORPvwG
    – user33274
    5 сен 2016 в 23:43
  • выбираем услуги - услуги зеленый фон, потом нажимаем на 1 -1 черная а 2 и 3 не активные, а остальные пункты меню, как и обычно
    – Aslero
    8 сен 2016 в 5:12

1 ответ 1

1

$(".submenu").click(function(){
  $(".submenu ul").slideToggle();
  $(".submenu").toggleClass("active");
});
.left-menu {
  background-color: #F4F4F4;
  min-height: 750px;
  width: 200px;
  float: left;
}
ul.menu {
  margin-top: 10px;
  width: 100%;
  list-style: none;
  padding-left: 0px;
  padding-right: 15px;
  float: left;
}
ul.menu li {
  font-size: 13px;
  line-height: 1.8;
  cursor: pointer;
}
ul.menu li a {
  padding: 5px 15px;
  display: block;
  margin: 0px;
  text-decoration: none;
  color: black;
}

ul.menu li:hover a,
ul.menu li.submenu:hover,
ul.menu li.submenu ul li:hover,
.active {
  background-color: #02A511;
  color: white;
}

ul.menu li.submenu ul {
  display: none;
  padding: 0px;
}

ul.menu li ul, ul.menu li.submenu ul li{
  list-style: none;
  background-color: #F4F4F4;
  color: black;
}
ul.menu li.submenu ul li{
  padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-menu" id="gmenu">
  <ul class="menu" id="fixed">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Разработка сайтов</a></li>
    <li class="submenu"><a href="#">Услуги</a>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
    <li><a href="#">Наши работы</a></li>
    <li><a>Акции</a></li>
    <li><a href="#">Статьи</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a>Хостинг</a></li>
    <li><a>Услуги копирайта</a></li>
    <li><a href="#">Вакансии</a></li>
    <li><a href="#">Отзывы</a></li>
    <li><a>О нас</a>
    </li>
  </ul>
</div>

3
  • выбираем услуги - услуги зеленый фон, потом нажимаем на 1 -1 черная а 2 и 3 не активные, а остальные пункты меню, как и обычно
    – Aslero
    8 сен 2016 в 5:13
  • 1
    Распишите подробно как выглядит до и после действия, ибо я ничего не понял.
    – Vedenin
    8 сен 2016 в 13:52
  • <li><a href="#">Главная</a></li> <li><a href="#">Разработка сайтов</a></li> <li class="submenu"><a href="#">Услуги</a> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li><a href="#">Наши работы</a></li> нажав на услуги (становится активным как и остальные меню, фон зеленый), список открывается, нажимаем на 1 - перехолим на страницу 1- пункт услуги активный все также, 1-черным цветом, а 2 и 3 серым
    – Aslero
    11 сен 2016 в 12:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.