it-swarm.com.ru

Создание выпадающего меню при нажатии CSS

Мне нужно создать меню с 5 опциями, после нажатия на определенное, появится новое подменю. Я понятия не имею, как это сделать.

/**Navigation */

nav {
  border: 1px solid red;
  float: left;
  margin-right: 35px;
  min-height: 280px;
}

nav li {
  text-decoration: none;
  font-weight: normal;
  color: red;
  list-style: none;
}


/**Content */

#section {
  background-color: ;
  border: 1px solid;
  font: normal 12px Helvetica, Arial, sans-serif;
  margin-left: 180px;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
<div class="clearfix"></div>
<nav>
  <ul>
    <li><a href="index.html" accesskey="1"> Home </a> </li>
    <li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>

    <ul>
      <li><a href="Commercial.html">Commercial</a> </li>
      <li><a href="Residential.html">Residential</a> </li>
      <li><a href="heritage.html">Heritage</a> </li>
      <li><a href="Rennovations.html">Rennovations</a> </li>
    </ul>

    <li><a href="services.html" accesskey="3"> Services </a> </li>
    <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
    <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
  </ul>
</nav>

13
Brendan

У CSS нет обработчика кликов. По этой причине это невозможно сделать со стандартным CSS. Вы могли бы использовать то, что называется хаком флажка, но, по моему скромному мнению, это немного неуклюже и было бы неловко работать внутри навигационного меню, как того требует ваш вариант использования. По этой причине я бы предложил jQuery или Javascript ... Вот довольно простое решение с использованием jQuery.

По сути, мы скрываем sub-nav с самого начала, используя display: none; Затем, используя jQuery, при нажатии «.parent» мы переключаем класс «.visible» на элемент sub-nav (вложенный UL) с помощью display: block;, который заставляет его появляться , При повторном нажатии он исчезает при удалении класса.

Обратите внимание, что для этого каждый вложенный <UL>, который является «sub-nav» , ДОЛЖЕН иметь класс .sub-nav, а его родительский элемент (<LI>) ДОЛЖЕН иметь класс .parent. Кроме того, поскольку здесь используется jQuery, вам необходимо подключить библиотеку jQuery к вашему сайту. Вы можете сделать это, разместив его самостоятельно и связав его, как обычно, или связав его с библиотечной службой Google (рекомендуется). 

JSFiddle Demo

$(document).ready(function() {
  $('.parent').click(function() {
    $('.sub-nav').toggleClass('visible');
  });
});
#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li>Home</li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

10
Michael

В дополнение к уже упомянутому хаку checkbox, вы также можете использовать кнопку в качестве пунктов меню и использовать состояние :focus для отображения выпадающего меню. Преимуществом этого является то, что меню закроется, если вы нажмете за его пределами. Некоторые элементы HTML естественно не получают фокус на клики; для них вы можете добавить атрибут "tabindex", чтобы позволить им получить фокус. 

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}
<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>

11
Stephan Muller

Конечно, я опоздал, но:

Вы можете вызвать щелчок CSS, используя взломать!

Работайте с флажком !!

Образец:

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }
    <div class="container">
        <label for="checkbox">Dropdown menu</label>
        <input id="checkbox" type="checkbox" />        
        <ul>
            <li><a href="#">Dropdown link 1</a></li>
            <li><a href="#">Dropdown link 2</a></li>
        </ul>
    </div>

Вы можете использовать переходы для анимации показа эффекта скрытия:) Это просто очень простой пример !!

Примечание: это CSS3-хак, если вам нужна поддержка borwser для старых браузеров, это не работает. 

3
Steven Web

Фактически, есть возможность заставить это работать с чистым CSS и поведением элементов браузера, используя хак с флажком, однако во время написания этого, это выдвигает на первый план то, что ДОЛЖНО быть сделано с CSS против того, что МОЖНО сделать с CSS. Также это может привести к довольно ужасному семантическому коду (в конце концов, есть причина, по которой он обычно указывается как флажок HACK). 

Сказав это, вы можете использовать его, если у вас есть только требования к современным браузерам, предоставляя ограниченную функциональность другим, и я сам использовал это в рабочем коде, в изолированном проекте только для Chrome, и с ним довольно интересно играть.

Вот ссылка, чтобы прочитать больше об этом:

http://css-tricks.com/the-checkbox-hack/

Но еще раз подчеркну, что, как и другие уже здесь, это функциональное поведение должно быть действительно сделано с помощью JavaScript. Если вы на самом деле не хотите решения для меню, основанного на наведении курсора, тогда это совсем другой вопрос!

1
lee_gladding

 $('#open').on('click', function(e) {
   simple_showpopup("popup", e);
 });

 function simple_showpopup(id, evt) {
   var _pnl = $("#" + id);
   _pnl.show();
   _pnl.css({
     "left": evt.pageX - ($("#" + id).width() / 2),
     "top": (evt.pageY + 10)
   });

   $(document).on("mouseup", function(e) {
     var popup = $("#" + id);
     if (!popup.is(e.target) && popup.has(e.target).length == 0) {
       popup.hide();
       $(this).off(e);
     }
   });
 }

 $("#popup").hide();
.defa-context-panel {
  border: 1px solid black;
  position: absolute;
  min-width: 200px;
  min-height: 150px;
  background-color: #f8f8f8;
  border: solid 1px #f2f2f2;
  border-radius: 10px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Open&nbsp;&nbsp;&nbsp;&nbsp;<span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>

<div id="popup" class="defa-context-panel">Content
  <div>DIV inside</div>
</div>

0
Godly Mathew

Чисто CSS решение вашей проблемы выглядит следующим образом

Демо: http://jsfiddle.net/HyGZf/1/

вам нужны input и label, и вы должны удалить href для портфолио, если вы хотите использовать только css

вы можете добавить transition: все 1s easy-in-out; в подменю , если вы хотите, чтобы оно было анимированным

/**Navigation */
nav{
    border: 1px solid red ;
    float: left;
    margin-right:35px;
    min-height:280px;
    }


nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}   
/**Content */
#section{
    background-color: ;
    border: 1px solid;
    font: normal 12px Helvetica, Arial, sans-serif; 
    margin-left:180px;
 }



 .clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;

}
#Portfolio:checked +ul ul#submenu{
 height:80px;   
}
#submenu{
    overflow:hidden;
    height:0px;
    margin:0;
}
a[accesskey="2"]{
    color:blue;
    cursor:pointer;
    text-decoration:underline;
}

разметка

    <div class="clearfix"></div>
<nav>
    <input id="Portfolio" type="checkbox" name="menu" hidden>
    <ul>
        <li><a href="index.html" accesskey="1"> Home </a> </li>
        <li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>

        <ul id=submenu type="list">
              <li><a href="Commercial.html">Commercial</a> </li>
              <li><a href="Residential.html">Residential</a> </li>
              <li><a href="heritage.html">Heritage</a> </li>
              <li><a href="Rennovations.html">Rennovations</a> </li>
        </ul>

        <li><a href="services.html" accesskey="3"> Services </a> </li>
        <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
        <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
     </ul>
</nav>
0
Gildas.Tambo

Вам нужно будет сделать это с помощью javascript и зарегистрировать обработчик события click для выполнения вашего действия.

Если вы новичок во всем, вам следует поискать некоторые учебники по javascript (не используйте W3Schools, ищите в другом месте), а затем посмотрите некоторые учебники по jQuery, так как jQuery упрощает подобные задачи.

0
BenM

Существует множество платформ, которые вы можете использовать с хорошо выглядящими меню для своих нужд, не говоря уже о том, что они поддерживают все устройства (планшеты, телефоны и ПК).

Например, в фреймворке Twitter начальной загрузки есть именно то, что вам нужно, проверьте это руководство: Twitter начальной загрузки - Navs

Прочитайте весь раздел Nav, в конце они говорят о Nav с выпадающим списком для дополнительных опций .. Меню самого руководства построено с помощью фреймворка Twitter.

0
Eran H.