jquery - Menu Button when Browser Is Resized -
i have css , html in website, please tell me if jquery needed, or else... so, have been trying change header button can click on , make vertical list, here example. when browser full sized, header vertical, when minimized, header turns button (top right on example.) , when clicked on, becomes vertical list. here code:
(body only)
<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> and 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: 0.3s ease-in-out 0s; transition: 0.3s ease-in-out 0s; } .nav ul li:hover:before { visibility: visible; -webkit-transform: scalex(1); transform: scalex(1); } .nav ul li { text-decoration: none; color: #fff; } /*============================ ======= miscellaneous ======== ============================*/ { text-decoration: none; } li { list-style: none; } please ask if more information needed, thanks.
i have used below code adding same functionality asking may you. have use javascript latest jquery fisrt add id nav 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> add css
@media , (max-width: 768px), screen , (-webkit-min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min--moz-device-pixel-ratio: 2) , (max-width: 1024px), screen , (-o-min-device-pixel-ratio: 2/1) , (max-width: 1024px), screen , (min-device-pixel-ratio: 2) , (max-width: 1024px), screen , (min-resolution: 192dpi) , (max-width: 1024px), screen , (min-resolution: 2dppx) , (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; } }
and add 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);
Comments
Post a Comment