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

3 ответа 3

2

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

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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