将子菜单添加到现有导航
Adding Submenu to Existing Nav
我一直在研究导航栏。我已经按照我喜欢的方式设置了它的样式,但出于某种原因,我在让子菜单工作时遇到问题。
代码如下:
<div id="head">
<input id="toggle" type="checkbox">
<label for="toggle" class="icon">
<div><!-- --></div>
<div><!-- --></div>
<div><!-- --></div>
</label>
<div id="nav">
<div>
<ul>
<li class="page_item page-item-8"><a href="http://url.com/home/">Home</a></li>
<li class="page_item page-item-10 page_item_has_children"><a href="http://url.com/about/">About</a>
<ul class="children">
<li class="page_item page-item-22 page_item_has_children"><a href="http://url.com/about/once-more/">Once More</a>
<ul class="children">
<li class="page_item page-item-23 page_item_has_children"><a href="http://url.com/about/once-more/another-sub-page/">Another Sub Page</a>
<ul class="children">
<li class="page_item page-item-25"><a href="http://url.com/about/once-more/another-sub-page/final-link/">Final Link</a></li>
<li class="page_item page-item-24"><a href="http://url.com/about/once-more/another-sub-page/something-else/">Something Else</a></li>
</ul>
</li>
</ul>
</li>
<li class="page_item page-item-21"><a href="http://url.com/about/another-page/">Another Page</a></li>
<li class="page_item page-item-20"><a href="http://url.com/about/subpage/">Subpage</a></li>
</ul>
</li>
<li class="page_item page-item-13 current_page_item"><a href="http://url.com/shop/" aria-current="page">Shop</a></li>
<li class="page_item page-item-9"><a href="http://url.com/faq/">FAQ</a></li>
<li class="page_item page-item-11"><a href="http://url.com/contact/">Contact</a></li>
</ul>
</div>
</div>
</div>
CSS 看起来像:
/* Toggle */
#toggle {
display: none;
}
/* Nav */
#nav li.current_page_item a {
background: #d2b48c;
border-radius: 40px;
color: #260f03;
}
#nav li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #fff;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 14px;
letter-spacing: 4px;
margin: 20px;
padding: 10px 10px 10px 15px;
text-decoration: none;
text-transform: uppercase;
}
/* Media */
@media screen and (max-width: 600px) {
/* Icon */
.icon {
background: #260f03;
margin: 0 auto;
padding: 20px 20px 30px;
position: absolute;
width: 100%;
z-index: 500;
}
.icon div {
background: #d2b48c;
border-radius: 3px;
height: 2px;
margin: 10px auto 0;
position: relative;
transition: all 0.3s ease-in-out;
width: 3em;
}
/* Toggle */
#toggle:checked + .icon div:nth-child(1) {
margin-top: 25px;
transform: rotate(-45deg);
}
#toggle:checked + .icon div:nth-child(2) {
margin-top: -2px;
transform: rotate(45deg);
}
#toggle:checked + .icon div:nth-child(3) {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .icon + #nav {
top: 0;
transform: scale(1);
}
/* Nav */
#nav {
background: rgba(38, 15, 3, 0.95);
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: -100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
z-index: 200;
}
#nav div {
height: 100%;
overflow: hidden;
overflow-y: auto;
position: relative;
}
#nav ul {
padding-top: 90px;
text-align: center;
}
#nav li a:before {
background: #fff;
content: '';
height: 0;
left: -0.5em;
position: absolute;
transition: all 0.2s ease-in-out;
width: 0.25em;
}
#nav li a:hover:before {
height: 100%;
}
}
@media screen and (min-width: 601px) {
/* HIDE the dropdown */
#nav li ul { display: none; }
/* DISPLAY the dropdown */
#nav li:hover > ul {
display: block;
position: absolute;
}
/* Nav */
#nav ul {
background: #260f03;
font-size: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav li a:hover {
border-bottom: 1px solid #d2b48c;
border-top: 1px solid #d2b48c;
}
}
JS Fiddle(带子菜单):https://jsfiddle.net/2v8zhL3e/1/
JS Fiddle(没有子菜单):https://jsfiddle.net/b0mj7gp4/
我找到了很多关于如何做到这一点的教程,但他们都在 li 上使用了一个浮点数。
我确实试过了...
我隐藏了下拉菜单:#nav li ul { display: none; }
然后悬停显示:
#nav li:hover > ul {
display: block;
position: absolute;
}
哪种类型的作品...但链接显示在主导航项的左侧,我想调整一下,以便链接堆叠并显示在相应 header 下方的中心位置。
我觉得我很接近,谁能给我指出正确的方向?
谢谢,
乔什
你没有位置: 亲戚在里。
而且,最好使用 position: absolute 没有悬停,默认情况下。
#nav li {
position: relative;
}
#nav li > ul {
position: absolute;
display: none;
}
#nav li:hover > ul {
display: block;
}
您可以将 display: flex
添加到 li:hover ul
,然后制作 flex-direction: column
并制作非悬停事件 position: absolute
、left: 0
。这会导致 ul 子元素浮动到最左侧的问题。因此,要解决此问题,您需要为其父级设置样式以使其具有相对位置。以下应该可以解决问题。
#nav li {
position: relative;
}
#nav li ul {
left: 0;
position: absolute;
}
#nav li:hover > ul {
display: flex;
flex-direction: column;
}
我一直在研究导航栏。我已经按照我喜欢的方式设置了它的样式,但出于某种原因,我在让子菜单工作时遇到问题。
代码如下:
<div id="head">
<input id="toggle" type="checkbox">
<label for="toggle" class="icon">
<div><!-- --></div>
<div><!-- --></div>
<div><!-- --></div>
</label>
<div id="nav">
<div>
<ul>
<li class="page_item page-item-8"><a href="http://url.com/home/">Home</a></li>
<li class="page_item page-item-10 page_item_has_children"><a href="http://url.com/about/">About</a>
<ul class="children">
<li class="page_item page-item-22 page_item_has_children"><a href="http://url.com/about/once-more/">Once More</a>
<ul class="children">
<li class="page_item page-item-23 page_item_has_children"><a href="http://url.com/about/once-more/another-sub-page/">Another Sub Page</a>
<ul class="children">
<li class="page_item page-item-25"><a href="http://url.com/about/once-more/another-sub-page/final-link/">Final Link</a></li>
<li class="page_item page-item-24"><a href="http://url.com/about/once-more/another-sub-page/something-else/">Something Else</a></li>
</ul>
</li>
</ul>
</li>
<li class="page_item page-item-21"><a href="http://url.com/about/another-page/">Another Page</a></li>
<li class="page_item page-item-20"><a href="http://url.com/about/subpage/">Subpage</a></li>
</ul>
</li>
<li class="page_item page-item-13 current_page_item"><a href="http://url.com/shop/" aria-current="page">Shop</a></li>
<li class="page_item page-item-9"><a href="http://url.com/faq/">FAQ</a></li>
<li class="page_item page-item-11"><a href="http://url.com/contact/">Contact</a></li>
</ul>
</div>
</div>
</div>
CSS 看起来像:
/* Toggle */
#toggle {
display: none;
}
/* Nav */
#nav li.current_page_item a {
background: #d2b48c;
border-radius: 40px;
color: #260f03;
}
#nav li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #fff;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 14px;
letter-spacing: 4px;
margin: 20px;
padding: 10px 10px 10px 15px;
text-decoration: none;
text-transform: uppercase;
}
/* Media */
@media screen and (max-width: 600px) {
/* Icon */
.icon {
background: #260f03;
margin: 0 auto;
padding: 20px 20px 30px;
position: absolute;
width: 100%;
z-index: 500;
}
.icon div {
background: #d2b48c;
border-radius: 3px;
height: 2px;
margin: 10px auto 0;
position: relative;
transition: all 0.3s ease-in-out;
width: 3em;
}
/* Toggle */
#toggle:checked + .icon div:nth-child(1) {
margin-top: 25px;
transform: rotate(-45deg);
}
#toggle:checked + .icon div:nth-child(2) {
margin-top: -2px;
transform: rotate(45deg);
}
#toggle:checked + .icon div:nth-child(3) {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .icon + #nav {
top: 0;
transform: scale(1);
}
/* Nav */
#nav {
background: rgba(38, 15, 3, 0.95);
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: -100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
z-index: 200;
}
#nav div {
height: 100%;
overflow: hidden;
overflow-y: auto;
position: relative;
}
#nav ul {
padding-top: 90px;
text-align: center;
}
#nav li a:before {
background: #fff;
content: '';
height: 0;
left: -0.5em;
position: absolute;
transition: all 0.2s ease-in-out;
width: 0.25em;
}
#nav li a:hover:before {
height: 100%;
}
}
@media screen and (min-width: 601px) {
/* HIDE the dropdown */
#nav li ul { display: none; }
/* DISPLAY the dropdown */
#nav li:hover > ul {
display: block;
position: absolute;
}
/* Nav */
#nav ul {
background: #260f03;
font-size: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav li a:hover {
border-bottom: 1px solid #d2b48c;
border-top: 1px solid #d2b48c;
}
}
JS Fiddle(带子菜单):https://jsfiddle.net/2v8zhL3e/1/
JS Fiddle(没有子菜单):https://jsfiddle.net/b0mj7gp4/
我找到了很多关于如何做到这一点的教程,但他们都在 li 上使用了一个浮点数。
我确实试过了...
我隐藏了下拉菜单:#nav li ul { display: none; }
然后悬停显示:
#nav li:hover > ul {
display: block;
position: absolute;
}
哪种类型的作品...但链接显示在主导航项的左侧,我想调整一下,以便链接堆叠并显示在相应 header 下方的中心位置。
我觉得我很接近,谁能给我指出正确的方向?
谢谢,
乔什
你没有位置: 亲戚在里。 而且,最好使用 position: absolute 没有悬停,默认情况下。
#nav li {
position: relative;
}
#nav li > ul {
position: absolute;
display: none;
}
#nav li:hover > ul {
display: block;
}
您可以将 display: flex
添加到 li:hover ul
,然后制作 flex-direction: column
并制作非悬停事件 position: absolute
、left: 0
。这会导致 ul 子元素浮动到最左侧的问题。因此,要解决此问题,您需要为其父级设置样式以使其具有相对位置。以下应该可以解决问题。
#nav li {
position: relative;
}
#nav li ul {
left: 0;
position: absolute;
}
#nav li:hover > ul {
display: flex;
flex-direction: column;
}