Нечувствительное навигационное меню

В настоящее время я создаю отзывчивый дизайн для существующего сайта. http://www.digitalcuttingsystems.com/Нечувствительное навигационное меню

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

учебники

http://www.w3schools.com/howto/howto_js_topnav.asp

https://css-tricks.com/responsive-menu-concepts/

http://www.hongkiat.com/blog/responsive-web-nav/

нав меню

<div class="header"> 
       <div> 
        <nav> 
        <ul class="topnav"> 
        <li class="selected"> 
         <a href="systems.php">Systems</a> <a href="systems.php" class="systems">Something for Everyone</a> 
        </li> 
        <li> 
         <a href="about.php">About</a> <a href="about.php" class="about">Industry Leading Engineers</a> 
        </li> 
        <li> 
         <a href="quality.php">Quality</a> <a href="quality.php" class="quality">Industry Leading Warranty</a> 
        </li> 
        <li > 
         <a href="contact.php">Contact</a> <a href="contact.php" class="contact">Call Us now!</a> 
        </li> 

       </ul> 
       </nav> 
      </div> 
     </div>

вот мое меню

https://jsfiddle.net/cpLkjm8f/

спасибо.

источник

2016-05-17 Mark Gerryl Mirandilla

В чем проблема? –

не отзывчивый сэр..извините, обновите мой вопрос –

Точно, какое действие вы ожидаете от своего меню ?????? –

Использование фиксированных ширины (ES): width: 900px;

предотвратить метки, чтобы быть изменяемыми.

Вы должны рассмотреть стратегию с процентной шириной или медиа-запросами.

источник

2016-05-17 06:11:08 Carlo

Используйте следующий код для достижения меню отзывчивых самозагрузок, добавить bootsrap.css и bootsrap.js

<div class="header"> 
    <nav class="navbar"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
     <a class="navbar-brand" href="#">Menus</a> </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="menu"> 
     <ul class="nav navbar-nav topnav"> 
      <li class="selected"> <a href="systems.php">Systems</a> <a href="systems.php" class="systems">Something for Everyone</a> </li> 
      <li> <a href="about.php">About</a> <a href="about.php" class="about">Industry Leading Engineers</a> </li> 
      <li> <a href="quality.php">Quality</a> <a href="quality.php" class="quality">Industry Leading Warranty</a> </li> 
      <li > <a href="contact.php">Contact</a> <a href="contact.php" class="contact">Call Us now!</a> </li> 
     </ul> 
     </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</div>

источник

2016-05-17 06:49:50

Я знаю, как использовать бутстрап, что я хочу - это простой отзывчивый навигатор. просто css и javascript –

Использование этого я создал образец дальше, вы можете добавить свои собственные CSS:

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title></title> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
</head> 
    <style> 

     .marginBottom-0 {margin-bottom:0;} 
     .dropdown-submenu{position:relative;} 
     .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} 
     .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;} 
     .dropdown-submenu:hover>a:after{border-left-color:#555;} 
     .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;} 


    </style> 
<body> 
    <div class="container"> 
      <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 

      <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Systems <span>&nbsp;Something for Everyone</span></a></li> 
        <li><a href="#">About <span>&nbsp;Industry Leading Engineers</span></a></li> 
        <li><a href="#">Quality <span>&nbsp;Industry Leading Warranty</span></a></li> 
        <li><a href="#">Contact <span>&nbsp;Call us now!</span></a></li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </nav> 
    </div> 
<script src="js/jquery.js"></script> 
<script src="js/bootstrap.js"></script> 
<script> 

    (function($){ 
    $(document).ready(function(){ 
     $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
      event.preventDefault(); 
      event.stopPropagation(); 
      $(this).parent().siblings().removeClass('open'); 
      $(this).parent().toggleClass('open'); 
     }); 
    }); 
})(jQuery); 

</script> 
</body> 
</html>

источник

2016-05-17 07:23:26

спасибо, сэр, я ценю вашу помощь –

Нечувствительное навигационное меню

ответ

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