3

Добрый день ! Вот меню

    #nav {

    }
    #nav, #nav ul {
        list-style:none;
        padding:0;
     }
    #nav ul {
        position:relative;
        z-index:-1;
    }
    #nav li {
        position:relative;
        z-index:100;
    }
    #nav ul li {
          margin-top: -34px;

        -moz-transition:  0.4s linear 0.4s;
        -ms-transition: 0.4s linear 0.4s;
        -o-transition: 0.4s linear 0.4s;
        -webkit-transition: 0.4s linear 0.4s;
        transition: 0.4s linear 0.4s;
    }
    #nav li a {
        width: 285px;
        background-color: #DF2222;
        text-align: center;
        color: #fff;
        display:block;
        font-size:12px;
        font-weight:bold;
        line-height:28px;
        height: 28px;
        outline:0;
        text-decoration:none;
          margin-top: 5px;
      border-radius: 5px;
    }
    #nav li a.sub {
        /* background:#950301 url("../images/down.gif") no-repeat; */
    }
    #nav li a + img {
        cursor:pointer;
        display:none;
        height:48px;
        left:0;
        position:absolute;
        top:0;
        width:200px;
    }
    #nav li a img {
        border-width:0px;
        height:24px;
        line-height:28px;
        margin-right:8px;
        vertical-align:middle;
        width:24px;
    }
    #nav li a:hover {
        background-color:#950301;
    }
    #nav ul li a {
        background-color:#eee;
        border-bottom:1px solid #ccc;
        color:#000;
        font-size:11px;
        line-height:22px;
    }
    #nav ul li a:hover {
        background-color:#ddd;
        color:#444;
    }
    #nav ul li a img {
        background: url("../images/bulb.png") no-repeat;
        border-width:0px;
        height:16px;
        line-height:22px;
        margin-right:5px;
        vertical-align:middle;
        width:16px;
    }
    #nav ul li:nth-child(odd) a img {
        /* background:url("../images/bulb2.png") no-repeat; */
    }
    #nav a.sub:focus {
        background:#bcbdc1;
        outline:0;
    }
    #nav a:hover ~ ul li, #nav a:hover ~ ul li:hover {
        margin-top:0;
        -moz-transition:  0.4s linear;
        -ms-transition: 0.4s linear;
        -o-transition: 0.4s linears;
        -webkit-transition: 0.4s linears;
        transition: 0.4s linear;
        display:block;
    }

    #nav a:hover + img, #nav a:hover + img {
        display:block;
    }
    #nav a.sub:active {
        background:#bcbdc1;
        outline:0;
    }
    #nav a:active ~ ul li {
        margin-top:0;
    }
    #nav ul:hover {
        display:block;
    }
<div class="sidebar-title" style="width: 280px;"><span style="font-weight: bold;">Наша продукция</span></div>
<ul id="nav">
<li><a href="products/electromotors">Электродвигатели</a>
<ul>
<li><a href="products/electromotors/10-adhr">Электродвигатели АДЧР</a></li>
<li><a href="products/electromotors/elektrodvigateli-dlya-obduva-transformatorov">Для обдува трансформаторов</a></li>
<li><a href="products/electromotors/39-able">Электродвигатели ABLE</a></li>
<li><a href="products/electromotors/9-air">Общепромышленные серии АИР</a></li>
</ul>
</li>
<li><a href="products/invertors">Преобразователи частоты</a></li>
<li><a href="products/softstarters">Устройства плавного пуска</a></li>
<li><a href="products/servo">Сервоприводы</a></li>
<li><a href="products/reduktory">Редукторы, мотор-редукторы</a></li>
<li><a href="products/cable">Кабельная продукция</a></li>
<li><a href="products/encoders">Энкодеры (датчики вращения)</a></li>
<li><a href="products/recuperators">Рекуператоры</a></li>
<li><a href="products/delta/shkafy-upravleniya">Шкафы управления</a></li>
<li><a href="products/fans">Вентиляторы</a></li>
<li><a href="products/panels">Панели оператора</a></li>
<li><a href="#">Электромагнитные тормоза</a></li>
<li><a href="#">Комплектные электроприводы</a></li>
</ul>

Подскажите пожалуйста как можно реализовать определение стиля не при наведении курсора мыши, а именно при нажатии, непосредственно на пункт меню ?

5
  • Открыть меню по клику с помощь css вы сможете и для этого есть несколько способов, но вот закрыть по нажатию куда-то на странице, кроме самих пунктов меню, вы не сможете. Может все таки использовать Javascript?
    – Ruslan
    8 сен 2015 в 9:49
  • @Ruslan Мы не ищем легких путей ! P.s. js знаю только базу ... ;(
    – Orange-Man
    8 сен 2015 в 9:51
  • @Ruslan, жирный label c fixed и подгонка z-index'ов.
    – Qwertiy
    8 сен 2015 в 10:31
  • @Qwertiy Не подумал, но в любом случае стал бы делать подобное меню только в экстренном случае.
    – Ruslan
    8 сен 2015 в 11:27
  • @Ruslan, согласен, что просто так такое делать в production-коде не следует. Тем не менее, задан вполне конкретный вопрос, который к тому же имеет решение. Причины могут быть разными - возможно, нужна поддержка отключенных скриптов, а возможно, автор просто хочет прокачать своё знание css.
    – Qwertiy
    8 сен 2015 в 13:08

3 ответа 3

2

лучше всего на jquery:

$(document).ready(function() {
  $('li').click(function(){
    $(this).addClass('active');
  });
});

или можете попробовать псевдоэлемент :active

5
  • Именно css хочу ) С :active получается только при "зажимании" курсора, а надо при клике
    – Orange-Man
    8 сен 2015 в 9:46
  • дело в том, что при помощи css не получится сохранять состояния элементов. у вас меню будет открываться в момент клика и мгновенно закрываться. Если совсем не хочется связываться с js, то попробуйте так: поставьте в каждый пункт меню checkbox и скройте его, пункт меню оберните в label. а подменю пусть появляется при .checkbox:checked 8 сен 2015 в 9:47
  • вместо : focus?? 8 сен 2015 в 9:50
  • нет, вместо :hover 8 сен 2015 в 9:52
  • @ДмитрийНовиков, если ооочень захотеть, то получится :)
    – Qwertiy
    8 сен 2015 в 10:28
0

Идея такая, к своему коду сам смотри, как применить.
Кстати, при необходимости можно checkbox'ы использовать.

input[type="radio"] {
  display: none;
}

div {
  overflow: hidden;
}

label {
  float: left;
  cursor: pointer;
  margin: .25em;
  padding: .25em .5em;
  border: 1px solid;
}

#tab-1:checked ~ div label[for="tab-1"],
#tab-2:checked ~ div label[for="tab-2"],
#tab-3:checked ~ div label[for="tab-3"] {
  background: silver;
}

.tab {
  display: none;
  margin: .25em;
  padding: .25em .5em;
  border: 1px solid;
}

#tab-1:checked ~ div .tab[data-tab="1"],
#tab-2:checked ~ div .tab[data-tab="2"],
#tab-3:checked ~ div .tab[data-tab="3"] {
  display: block;
}
<input type=radio id=tab-1 name=tab>
<input type=radio id=tab-2 name=tab>
<input type=radio id=tab-3 name=tab>

<div>
  <label for=tab-1>Tab 1</label>
  <label for=tab-2>Tab 2</label>
  <label for=tab-3>Tab 3</label>
</div>

<div>
  <div class=tab data-tab=1>Contents of the first tab</div>
  <div class=tab data-tab=2>Contents of the second tab</div>
  <div class=tab data-tab=3>Contents of the third tab</div>
</div>

0

А вот так можно реализовать скрытие по клику вне области:

input {
  display: none;
}

label, ul {
  border: 1px solid;
}

label {
  z-index: 1;
}

label:after {
  content: "Show";
}

ul {
  position: relative;
  z-index: 2;
  display: none;
  float: left;
}

#dropdown:checked ~ label:after {
  content: "";
}

#dropdown:checked ~ label {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: none;
}

#dropdown:checked ~ ul {
  display: block;
}
<input type=checkbox id=dropdown>
<label for=dropdown></label>
<ul>
  <li>Пункт 1
  <li>Пункт 2
  <li>Пункт 3
  <li>Пункт 4
  <li>Пункт 5
</ul>

Ваш ответ

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

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