我有一个简单的固定导航栏,其中一个列表元素有一个下拉悬停。
问题 - 当屏幕达到一定宽度时,下拉导航使我很难应用汉堡菜单。
最初,我尝试创建一个小的菜单div,它会被隐藏,然后以一定的宽度显示,但遗憾的是没有用。
我老老实实地失去了如何做到这一点。
以下是代码 - 这是codepen
CSS -
*, *:before, *:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* clear fix */
.c-f::after {
content: "";
display: table;
clear: both;
}
ul, ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.large-trunk {
width: 100%;
max-width: 1700px;
margin-right: auto;
margin-left: auto;
}
.inline-block-container > * {
display: -moz-inline-stack;
display: inline-block;
}
/* Grid Units */
.col-1 {width:100%;}
body {
margin: 0;
}
/* Links ------------------*/
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #ffd800 !important;
}
#menu-menu a:hover {
text-decoration: underline;
opacity: 0.6;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* Typography ------------------*/
html {
font-family: 'Avenir Book', sans-serif;
font-weight: 200;
font-style: normal;
font-size: 15px;
line-height: 1.35em;
}
/* Navigation ------------------*/
.header-menu {
position:fixed;
top:0px;
border-bottom: 1px solid #ddd;
background-color: #fff;
z-index: 10;
}
.header-menu ul li a {
padding: 0 2.5rem;
line-height: 3.5rem;
display: block;
}
.main-menu {
margin: 0px auto;
overflow: hidden;
padding-left: 5rem;
}
.home-logo-container {
float: left;
line-height: 3.5rem;
border-right: 1px solid #ddd;
}
#menu-menu {
text-align:center;
padding-right: 0.6rem;
}
.sub-menu-item {
display: none;
position: absolute;
overflow: hidden;
border: 1px solid #ddd;
}
.sub-menu:hover .sub-menu-item {
display: block;
width: 200px;
}
/* mobile nav ----------------*/
.sm-logo {
display: none;
}
HTML -
<div class="header-menu col-1">
<!-- .mobile-only-logo -->
<div class="sm-logo">
<img src="">
</div>
<div class="main-menu large-trunk float-container">
<div class="home-logo-container">
<a href="#" class="home-link">
Rare Select  
</a>
</div>
<!-- .main-navigation -->
<nav id="site-nav" class="main-nav float-container">
<div class="menu-container">
<ul id="menu-menu" class="inline-block-container">
<li>
<a href="#">Home</a>
</li>
<li class="sub-menu">
<a href="#">Info</a>
<ul class="sub-menu-item">
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">T's & C's</a>
</li>
<li>
<a href="#">Find us</a>
</li>
</ul>
</li>
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
澄清 - 我只需要一个使用css或jQuery的方法,它会以较小的屏幕宽度显示汉堡包菜单。
由于
答案 0 :(得分:0)
<nav class="navbar navbar-fixed-top navbar-bootsnipp" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" onclick="openMenuNav()">
<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="{{ url('/') }}">Rare Select</a>
</div>
<div class="menunav " id="menuNav">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li class="sub-menu">
<a href="#">Info</a>
<ul class="sub-menu-item">
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">T's & C's</a>
</li>
<li>
<a href="#">Find us</a>
</li>
</ul>
</li>
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
试试这个..希望这有助于解决您的问题
答案 1 :(得分:0)
您可以在没有jQuery或JavaScript的情况下实现此目的。您需要使用的只是CSS媒体查询。媒体查询允许您仅在满足特定条件时显示内容。在这种情况下,您的视口宽度必须符合某些约束。
媒体查询的基本格式为:
@media (/* Condition */) {
/* CSS for when condition is met. */
}
如果您运行以下代码段,则媒体查询会导致汉堡菜单仅在屏幕宽度小于768px时显示。这是因为一旦宽度为768px或更高,媒体查询就会满足,因此内部的CSS会运行,并为图像设置display
属性为none
。
img {
width: 100px;
display: block;
}
@media (min-width: 768px) {
img {
display: none;
}
}
&#13;
<html>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png">
</body>
</html>
&#13;
您可以在MDN上阅读有关媒体查询的更多信息。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries