Создание раскрывающегося меню на клике CSS

Ответ 1

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

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

Обратите внимание, что для этого для каждого вложенного <UL>, который является "sub-nav" MUST, имеет класс .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>

Ответ 2

В дополнение к уже упомянутому хакеру 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>

Ответ 3

Конечно, я опаздываю, но:

Вы можете вызвать клик 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>

Ответ 4

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

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

Вот ссылка, чтобы узнать больше об этом:

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

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

Ответ 5

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

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

Ответ 6

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

Например, в блоке bootstrap twitter есть именно то, что вам нужно, проверьте этот учебник: Twitter bootstrap - Navs

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

Ответ 7

чистое решение css для вашей проблемы выглядит как

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

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

вы можете добавить переход: все 1s ease-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>

Ответ 8

 $('#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>