响应式导航下拉菜单
Responsive Navigation Dropdown Menu
我好像无法将下拉菜单移动到导航下方。我尝试了几种不同的方法来实现这一点,但我对内联块与浮动和其他技术感到困惑。
我在这里做了一个fiddle:
jsfiddle.net/p1mrtuex/
如您所见,悬停时下拉菜单会拉到 "portfolio" link 的一侧。我希望它在宽视口和窄视口的 link 下方列出。
提前致谢。
我不确定你是否想做这样的事情,但试试这个:
菜单
- 家
- 投资组合
- 画作
- 图纸
- 摄影
- 关于
- 联系
`http://jsfiddle.net/p1mrtuex/`
将 "nav ul li:hover ul" 更改为 display:block 应该清除它。
nav ul li:hover ul {
display: block;
}
我建议首先对移动样式执行类似的操作。
$('.handle').on('click', function(){
$('nav > ul').toggleClass('showing');
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
a {
text-decoration: none;
color: inherit;
}
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
visibility:hidden;
height:0;
max-height:20em;
overflow:scroll;
}
nav ul li a {
box-sizing: border-box;
display:block;
padding: 1.2em;
text-align: left;
line-height:1.2em;
}
.showing {
height:auto;
visibility:visible;
}
nav ul li:hover {
background-color: #399077;
}
nav ul li:hover ul {
visibility: visible;
height:auto;
background-color:green;
}
.handle {
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px 20px;
cursor: pointer;
color: white;
}
.handle img {
display: inline-block;
width: 40px;
float: left;
margin-left: 15%;
margin-top: 10px;
}
@media only screen and (min-width: 700px) {
.handle {
display: none;
}
nav ul {
overflow:visible;
}
nav > ul {
height:auto;
visibility:visible;
text-align:center;
margin:0 auto;
}
nav > ul > li {
display:inline-block;
position:relative;
}
nav > ul > li > ul {
position:absolute;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<div class="logo">
<a href="#">LOGO GOES HERE</a>
</div>
</header>
<nav>
<ul>
<li><a href="#" alt="portfolio" >home</a></li>
<li><a href="#" alt="portfolio" >portfolio</a>
<ul>
<li><a href="#" alt="paintings" >paintings</a></li>
<li><a href="#" alt="drawings" >drawings</a></li>
<li><a href="#" alt="photography" >photography</a></li>
</ul>
</li>
<li><a href="#" alt="about the artist" >about</a></li>
<li><a href="#" alt="contact information" >contact</a></li>
</ul>
<div class="handle">
<h4>menu</h4>
</div>
</nav>
我好像无法将下拉菜单移动到导航下方。我尝试了几种不同的方法来实现这一点,但我对内联块与浮动和其他技术感到困惑。
我在这里做了一个fiddle:
jsfiddle.net/p1mrtuex/
如您所见,悬停时下拉菜单会拉到 "portfolio" link 的一侧。我希望它在宽视口和窄视口的 link 下方列出。
提前致谢。
我不确定你是否想做这样的事情,但试试这个: 菜单
- 家
- 投资组合
- 画作
- 图纸
- 摄影
- 关于
- 联系
`http://jsfiddle.net/p1mrtuex/`
将 "nav ul li:hover ul" 更改为 display:block 应该清除它。
nav ul li:hover ul {
display: block;
}
我建议首先对移动样式执行类似的操作。
$('.handle').on('click', function(){
$('nav > ul').toggleClass('showing');
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
a {
text-decoration: none;
color: inherit;
}
nav ul {
background-color: #43a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
visibility:hidden;
height:0;
max-height:20em;
overflow:scroll;
}
nav ul li a {
box-sizing: border-box;
display:block;
padding: 1.2em;
text-align: left;
line-height:1.2em;
}
.showing {
height:auto;
visibility:visible;
}
nav ul li:hover {
background-color: #399077;
}
nav ul li:hover ul {
visibility: visible;
height:auto;
background-color:green;
}
.handle {
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px 20px;
cursor: pointer;
color: white;
}
.handle img {
display: inline-block;
width: 40px;
float: left;
margin-left: 15%;
margin-top: 10px;
}
@media only screen and (min-width: 700px) {
.handle {
display: none;
}
nav ul {
overflow:visible;
}
nav > ul {
height:auto;
visibility:visible;
text-align:center;
margin:0 auto;
}
nav > ul > li {
display:inline-block;
position:relative;
}
nav > ul > li > ul {
position:absolute;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<div class="logo">
<a href="#">LOGO GOES HERE</a>
</div>
</header>
<nav>
<ul>
<li><a href="#" alt="portfolio" >home</a></li>
<li><a href="#" alt="portfolio" >portfolio</a>
<ul>
<li><a href="#" alt="paintings" >paintings</a></li>
<li><a href="#" alt="drawings" >drawings</a></li>
<li><a href="#" alt="photography" >photography</a></li>
</ul>
</li>
<li><a href="#" alt="about the artist" >about</a></li>
<li><a href="#" alt="contact information" >contact</a></li>
</ul>
<div class="handle">
<h4>menu</h4>
</div>
</nav>