Отзывчивое навигационное меню CSS вместо JQuery возможно

Я пытаюсь создать отзывчивое меню навигации, которое сжимается при уменьшении размера окна. Я получил его для работы в jquery и css, но на мобильных устройствах медленно, и я читал, что лучше всего его кодировать только в CSS, но я не смог найти решение для него. Вот что я имею в настоящее время для jquery, html и css. Любая помощь приветствуетсяОтзывчивое навигационное меню CSS вместо JQuery возможно

Jquery код:

$(function() { 
    var menu  = $('#top_menu'); 
     menu  = $('nav ul'); 
     menuHeight = menu.height(); 

    $(top_menu).click(function(e) { 
     e.preventDefault(); 
     menu.slideToggle(); 
    }); 

    $(window).resize(function(){ 
     var w = $(window).width(); 
     if(w > 720 && menu.is(':hidden')) { 
      menu.removeAttr('style'); 
     } 
    }); 
});

HTML код:

 <nav> 
      <ul> 
       <li><a href="<?php bloginfo('url'); ?>/forum">Forums</a></li> 
       <li><a href="<?php bloginfo('url'); ?>/aboutus">About Us</a></li> 
       <li><a href="<?php bloginfo('url'); ?>/Portfolio">Portfolio</a></li> 
      </ul> 
      <a href="#" id="top_menu">Menu</a> 
     </nav>

CSS код:

nav a#top_menu { 
    display: block; 
    background: url('../images/main_logo.png') no-repeat; 
    background-position: 20px 17px; 
    text-indent: -9999em; 
    position: relative; 
    width: 100%; 
    border-bottom: 1px solid transparent; 
} 

nav a#top_menu:hover { 
    border-bottom: 1px solid #305f6d; 
} 

nav a#top_menu:after { 
    content:""; 
    background: url('../images/mini.png') no-repeat; 
    width: 30px; 
    height: 30px; 
    display: inline-block; 
    position: absolute; 
    right: 15px; 
    top: 15px; 
}

источник

2013-04-24 Momololo

Если вы хотите, чтобы достичь этого с чистого CSS, то вы должен действительно посмотреть Navigataur (https://coderwall.com/p/sujd_w), который является чистым решением CSS вместо использования jQuery.

установки выглядит следующим образом:

Ссылки таблица стили между ними вашими <head> тегами, как так:

<html> 
<head><link rel="stylesheet" type="text/css" href="navigataur.css"></head> 
<body> 
</body> 
</html>

Редактировать ваши имена ваших CSS элементов, если таковые имеются названий элементов ниже уже используются в вашем файле css

Для работы из коробки, вам потребуются следующие изменения в разметке (классы могут быть изменены в таблице стилей, если вы используете что-то другое):

Внешняя <div> с классом header
Ввод [type = checkbox] с идентификатором toggle и меткой [for = toggle] с классом toggle чуть выше вашего меню списка.
меню списка (либо уль или ола) с классом menu

Изменить

HTML код (простейший пример можно):

<input type='checkbox' id='toggle'/> <label for='toggle' 
class='toggle'></label> 
<ul class="menu"> 
    <li><a href="#">Google</a></li> 
    <li><a href="#">Facebook</a></li> 
    <li><a href="#">Youtube</a></li> 
    <li><a href="#">Twitter</a></li> 
</ul>

И все, все готово!

Вот демо Navigataur в действии: http://micjamking.github.com/Navigataur/

источник

2013-04-25 01:15:36 adaam

Именно то, что я искал, спасибо. – Momololo

@KaiYue Прохладный, пожалуйста, отметьте мой ответ как правильный, пожалуйста. – adaam

Отзывчивое навигационное меню CSS вместо JQuery возможно

ответ

Смежные вопросы