Кнопка меню при изменении браузера

У меня есть только CSS и HTML на моем сайте, пожалуйста, скажите мне, нужен ли jQuery или что-то еще ... Итак, я пытаюсь изменить заголовок на кнопку, нажмите и сделайте вертикальный список, вот хороший example. Когда браузер имеет полный размер, заголовок является вертикальным, но когда он сведен к минимуму, заголовок поворачивается на кнопку (вверху справа на example.), А при нажатии - становится вертикальным списком. Вот мой код:Кнопка меню при изменении браузера

(только корпус)

<body> 
<div class="mainHeader"> 

    <div class="container"> 

     <div class="logo"> 
      <a href="#"><img src="Images/banner.png" width="300" height="100"></a> 
     </div> 

     <div class="nav"> 
      <ul class="nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Roster</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Our Sponsors</a></li> 
       <li><a href="#">About Us</a></li> 
      </ul> 
     </div> 

    </div> 

</div>

и CSS:

/*============================ 
======= Imported Fonts======== 
============================*/ 

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700); 
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); 

/*========================= 
======= Body style ======== 
=========================*/ 

body { 
    color: #000305; 
    font-size: 110%; /* Base font size: 14px */ 
    font-family: 'Montserrat', serif; 
    line-height: 1.5; 
    margin: 0 auto; 
    padding: 0; 
    left: 50%, margin-left: -(width of element/2); 
    width: 100%; 
} 

/*===================== 
======= Header ======== 
=====================*/ 

.mainHeader { 
    background: #02236a; 
    width: 100%; 
    height: auto; 
    top: 0; 
    position: fixed; 
    margin-left: auto; 
    margin-right: auto; 
    margin: 0; 
} 

.container { 
    width: 100%; 
    margin: 0 auto; 
} 

.nav { 
    float: right; 
} 

.logo { 
    float: left; 
} 

    /*======================== 
    ======= Underline ======== 
    ========================*/ 

    .nav ul li { 
     position: relative; 
     color: #000; 
     text-decoration: none; 
     float: left; 
     margin-right: 75px; 
     margin-left: 55px; 
     padding-top: 25px; 
    } 

    .nav ul li:hover { 
     color: #000; 
    } 

    .nav ul li:before { 
     content: ""; 
     position: absolute; 
     width: 100%; 
     height: 2px; 
     bottom: 0; 
     left: 0; 
     background-color: #fff; 
     visibility: hidden; 
     -webkit-transform: scaleX(0); 
     transform: scaleX(0); 
     -webkit-transition: all 0.3s ease-in-out 0s; 
     transition: all 0.3s ease-in-out 0s; 
    } 

    .nav ul li:hover:before { 
     visibility: visible; 
     -webkit-transform: scaleX(1); 
     transform: scaleX(1); 
    } 

    .nav ul li a { 
     text-decoration: none; 
     color: #fff; 
    } 

/*============================ 
======= Miscellaneous ======== 
============================*/ 

a { 
    text-decoration: none; 
} 

li { 
    list-style: none; 
}

Пожалуйста, спросите, если требуется дополнительная информация, спасибо.

источник

2015-03-28 ieblake

Я использовал приведенный ниже код, чтобы добавить те же функции, что вы просите, может это вам помочь. Вы должны использовать JavaScript с последними JQuery Fisrt добавить идентификатор к вашему нав DIV

<div class="nav" id="navbar> 
     <ul class="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Roster</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">Our Sponsors</a></li> 
      <li><a href="#">About Us</a></li> 
     </ul> 
    </div>

добавить CSS

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { 
    #nav { 
    width: 100%; 
} 
#nav #menu-button { 
    display: block; 
    padding: 20px; 
    color: #000000; 
    cursor: pointer; 
    font-size: 12px; 
    text-transform: uppercase; 
} 
#nav #menu-button::after { 
    content:''; 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    display: block; 
    width: 15px; 
    height: 2px; 
    background: #000000; 
} 
#nav #menu-button::before { 
    content:''; 
    position: absolute; 
    top: 25px; 
    right: 20px; 
    display: block; 
    width: 15px; 
    height: 3px; 
    border-top: 2px solid #000000; 
    border-bottom: 2px solid #000000; 
}

}

и добавить Javascript

(function ($) { 

$.fn.menumaker = function (options) { 

    var nav = $(this), 
     settings = $.extend({ 
      title: "Menu", 
      format: "dropdown", 
      sticky: false 
     }, options); 

    return this.each(function() { 
     nav.prepend('<div id="menu-button">' + settings.title + '</div>'); 
     $(this).find("#menu-button").on('click', function() { 
      $(this).toggleClass('menu-opened'); 
      var mainmenu = $(this).next('ul'); 
      if (mainmenu.hasClass('open')) { 
       mainmenu.hide().removeClass('open'); 
      } else { 
       mainmenu.show().addClass('open'); 
       if (settings.format === "dropdown") { 
        mainmenu.find('ul').show(); 
       } 
      } 
     }); 

     nav.find('li ul').parent().addClass('has-sub'); 

     multiTg = function() { 
      nav.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
      nav.find('.submenu-button').on('click', function() { 
       $(this).toggleClass('submenu-opened'); 
       if ($(this).siblings('ul').hasClass('open')) { 
        $(this).siblings('ul').removeClass('open').hide(); 
       } else { 
        $(this).siblings('ul').addClass('open').show(); 
       } 
      }); 
     }; 

     if (settings.format === 'multitoggle') multiTg(); 
     else nav.addClass('dropdown'); 

     if (settings.sticky === true) nav.css('position', 'fixed'); 

     resizeFix = function() { 
      if ($(window).width() > 768) { 
       nav.find('ul').show(); 
      } 

      if ($(window).width() <= 768) { 
       nav.find('ul').hide().removeClass('open'); 
      } 
     }; 
     resizeFix(); 
     return $(window).on('resize', resizeFix); 

    }); 
}; 
})(jQuery); 

(function ($) { 
$(document).ready(function() { 

    $(document).ready(function() { 
     $("#nav").menumaker({ 
      title: "Menu", 
      format: "multitoggle" 
     }); 

     $("#nav").prepend("<div id='menu-line'></div>"); 

     var foundActive = false, 
      activeElement, linePosition = 0, 
      menuLine = $("#nav #menu-line"), 
      lineWidth, defaultPosition, defaultWidth; 

     $("#nav > ul > li").each(function() { 
      if ($(this).hasClass('active')) { 
       activeElement = $(this); 
       foundActive = true; 
      } 
     }); 

     if (foundActive === false) { 
      activeElement = $("#nav > ul > li").first(); 
     } 

     defaultWidth = lineWidth = activeElement.width(); 

     defaultPosition = linePosition = activeElement.position().left; 

     menuLine.css("width", lineWidth); 
     menuLine.css("left", linePosition); 

     $("#nav > ul > li").hover(function() { 
      activeElement = $(this); 
      lineWidth = activeElement.width(); 
      linePosition = activeElement.position().left; 
      menuLine.css("width", lineWidth); 
      menuLine.css("left", linePosition); 
     }, 

     function() { 
      menuLine.css("left", defaultPosition); 
      menuLine.css("width", defaultWidth); 
     }); 

    }); 


}); 
})(jQuery);

источник

2015-03-28 10:38:35

Спасибо, но у меня есть никогда не использовал jQuery или JavaScript раньше, так как бы я это сделал? – ieblake

, если вы хотите использовать только css, тогда вы можете использовать экран @media, но тогда вы можете отображать только свое меню в вертикальном списке, но если вы хотите добавить кнопку меню и добавить событие, которое контролирует вашу навигацию, тогда вы должны использовать js .. –

Я имею ввиду, как бы реализовать jQuery? – ieblake

Кнопка меню при изменении браузера

ответ

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