如何使菜單行響應？
[英]How do I make the menu line responsive?
問題描述
我已經盡我所能嘗試了大多數事情來使菜單行與導航欄保持一致，但是它不起作用。 以下是相關的CSS，HTML和Javascript代碼。
(function($) { $.fn.menumaker = function(options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", format: "dropdown", sticky: false }, options); return this.each(function() { cssmenu.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(); } } }); cssmenu.find('li ul').parent().addClass('has-sub'); multiTg = function() { cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenu.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 cssmenu.addClass('dropdown'); if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function() { if ($( window ).width() > 768) { cssmenu.find('ul').show(); } if ($(window).width() <= 768) { cssmenu.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function($){ $(document).ready(function(){ $(document).ready(function() { $("#cssmenu").menumaker({ title: "Menu", format: "multitoggle" }); $("#cssmenu").prepend("<div id='menu-line'></div>"); var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth; $("#cssmenu > ul > li").each(function() { if ($(this).hasClass('active')) { activeElement = $(this); foundActive = true; } }); defaultWidth = lineWidth = activeElement.width(); defaultPosition = linePosition = activeElement.position().left; menuLine.css("width", lineWidth); menuLine.css("left", linePosition); $("#cssmenu > 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);
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 0px; left: 0px; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #menu-button { display: none; } #cssmenu { width: 100%; position: static; font-family: "lato", sans-serif; font-size: 1.1em; font-weight: 700; background: #fbfbfb; height: 70px; top: -8px; border-bottom: 1px #e6e6e6 solid; display: inline-block; } #menu-line { position: absolute; top: 67px; left: 0; height: 3px; background: #5e9682; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #cssmenu > ul > li { display: inline-block; } #cssmenu.align-center ul ul { text-align: center; } #cssmenu > ul > li > a { padding: 20px; top: 8px; font-size: 12px; text-decoration: none; text-transform: uppercase; color: #9b9797; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a { color: #5e9682; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Refine Studios - Subtle Refine</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> </head> <body> <div id="cssmenu"> <ul> <li class="active"><a href="#">Home</a> </li> <li><a href="#">Report</a> <li><a href="#">Product</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> </body> </html>
2 個解決方案
解決方案1
0 2016-10-30 16:35:55
您想要這樣的東西嗎：
@import url(http://fonts.googleapis.com/css?family=Exo:400,500,700,700italic); * { box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { margin: 1.25em .75em; background: url(http://subtlepatterns.com/patterns/black-Linen.png); font: 1.4em 'Exo', sans-serif; } nav[role="select"] { width: 100%; position: relative; color: #000; } nav[role="select"] > select { display: none; } nav[role="select"] ul { width: 100%; list-style: none; } nav[role="select"] ul > li { float: left; padding: .55em .45em; width: 19%; font-size: 1.2em; background-color: rgba(174, 86, 168, 0.5); text-align: center; transition-duration: .15s; transition-timing-function: ease-in-out; transition-property: box-shadow, background, color, text-align, padding; cursor: pointer; } nav[role="select"] ul > li:hover { background-color: rgba(174, 86, 168, 0.3); color: #fff; text-align: left; padding-left: .75em; box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.3), 0 0 0 0.5em rgba(0, 0, 0, 0.3), 0 0 0 0.75em rgba(0, 0, 0, 0.3), inset 0 0 0 0.25em rgba(0, 0, 0, 0.3); } nav[role="select"] ul > li > a { color: inherit; text-decoration: none; transition: inherit; } /* small screens */ @media screen and (max-width: 44em) { body { margin: 1em 0; } nav[role="select"] ul { display: none; } nav[role="select"]:after { position: absolute; z-index: -1; content: "Menu"; right: 0; bottom: -1.75em; background: rgba(174, 86, 168, 0.4); padding: .15em .55em; } nav[role="select"] select { display: block; user-select: none; cursor: pointer; width: 100%; padding: .55em .45em; border: none; background-color: rgba(174, 86, 168, 0.25); font: 1.2em 'Exo', sans-serif; } }
<nav role="select"> <ul> <li><a href="#">Stream</a></li> <li><a href="#">Lab</a></li> <li><a href="#">Projects</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <select onchange="if (this.value) window.location.href = this.value;"> <option value="#">Stream</option> <option value="#">Lab</option> <option value="#">Projects</option> <option value="#">About</option> <option value="#">Contact</option> </select> </nav>
解決方案2
0 2016-10-30 16:57:12
您完全不需要使用jQuery就可以做到這一點。
只需使用CSS：hover選擇器即可
#somediv:hover { border-bottom: 2px green solid; }
這是一個不錯的響應式Flexbox解決方案，您也許可以借鑒一些想法。
.flexcanvas { width: 100%; height: 110px !important; } #HomeArea:hover, #AboutArea:hover, #ProductArea:hover, #ReportArea:hover, #ContactArea:hover { border-bottom: 2px green solid; } .rowParent { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .columnParent { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .rowParent, .columnParent { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .columnParent { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flexChild { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } #AboutBar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 20px; background-color: 'green'; } #ContactBar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; background-color: 'green'; height: 20px; } #ProductBar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 20px; background-color: 'green'; } #ReportBar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 20px; background-color: 'green'; } #HomeBar { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 20px; background-color: 'green'; } .bar { min-width: 100%; min-height: 20px; } #MenuFooterContainer { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 40px; } #HeaderTopContainer { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 70px; } #MenuContainer { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 80px; } #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 0px; left: 0px; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* HERES THE IMPORTANT MEDIA QUERY */ @media (max-width: 800px) { #cssmenu #menu-button { display: block; } } @media (min-width: 801px) { #cssmenu #menu-button { display: none; } } #cssmenu { width: 100%; position: static; font-family: "lato", sans-serif; font-size: 1.1em; font-weight: 700; background: #fbfbfb; height: 70px; top: -8px; border-bottom: 1px #e6e6e6 solid; display: inline-block; } #menu-line { position: absolute; top: 67px; left: 0; height: 3px; background: #5e9682; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } #cssmenu > ul > li, #cssmenu > ul { display: inline-block; } #cssmenu.align-center ul ul { text-align: center; } #cssmenu > ul > li > a { padding: 20px; top: 8px; font-size: 12px; text-decoration: none; text-transform: uppercase; color: #9b9797; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a { color: #5e9682; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Refine Studios - Subtle Refine</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> </head> <body> <div id="cssmenu" class="flexChild columnParent flexcanvas"> <div id="MenuContainer" class="flexChild columnParent"> <div id="HeaderTopContainer" class="flexChild"></div> <div id="MenuFooterContainer" class="flexChild rowParent"> <div id="HomeArea" class="flexChild columnParent"> <div id="HomeLink" class="flexChild">Home</div> <div id="HomeBar" class="flexChild bar"></div> </div> <div id="ReportArea" class="flexChild columnParent"> <div id="ReportLink" class="flexChild">Report</div> <div id="ReportBar" class="flexChild bar"></div> </div> <div id="ProductArea" class="flexChild columnParent"> <div id="ProductLink" class="flexChild">Product</div> <div id="ProductBar" class="flexChild bar"></div> </div> <div id="ContactArea" class="flexChild columnParent"> <div id="ContactLink" class="flexChild">Contact</div> <div id="ContactBar" class="flexChild bar"></div> </div> <div id="AboutArea" class="flexChild columnParent"> <div id="AboutLink" class="flexChild">About</div> <div id="AboutBar" class="flexChild bar"></div> </div> </div> </div> <div id="BodyArea" class="flexChild"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> </body> </html>
我正在嘗試使用固定位置菜單制作響應式網站。 如何獲得菜單div的大小以將容器下推？
[英]I'm trying to make a responsive website with a fixed position menu. How do I get the size of the menu div to push the container down?
調整頁面大小后，如何使表單項響應並入行？
[英]How do I make my form items responsive & fall into line when page is resized?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.