[英]Wordpress/CSS - Submenu hover dropdown styles added to navigation bar
我有一個響應式導航欄,已將其添加到WordPress主題中。 但我希望將子菜單下拉菜單添加到響應式導航欄中,但不確定如何執行此操作。 我是PHP和WordPress的新手。
的HTML
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu( $args ); ?>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
的CSS
nav {
height: 40px;
width: 100%;
color: #fff;
background: #86c024;
font-size: 11pt;
position: relative;
}
nav ul {
padding: 0;
margin: 0 auto;
max-width:1000px;
width: 100%;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
padding: 0 10px;
border-right: 1px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li a:link, a:visited {
color: white
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background: #2098d1;
}
nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
font-weight: bold;
background: #2098d1;
}
nav a#pull {
display: none;
}
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
@media only screen and (max-width : 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background: #86c024;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('img/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Java腳本
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
額外的CSS嘗試
ul.sub-menu { /* this targets all sub menus */
display: none; /* hide all sub menus from view */
position: absolute;
z-index: 10;
top: 40px; /* this should be the same height as the top level menu -- height + padding + borders */
}
ul.sub-menu li { /* this targets all submenu items */
width: 100px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
ul.sub-menu li a { /* target all sub menu item links */
padding: 5px 10px; /* give our sub menu links a nice button feel */
}
ul.sub-menu li:hover {
display: block; /* show sub menus when hovering over a parent */
}
我已經調整了您的某些CSS和HTML,請立即檢查其工作情況。
主要問題是在nav
的高度中,我也將a#pull
的位置更改為ul
的頂部。
$(function() { var pull = $('#pull'); menu = $('nav ul'); menuHeight = menu.height(); $(pull).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function() { var w = $(window).width(); if (w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); });
nav { width: 100%; color: #fff; background: #86c024; font-size: 11pt; position: relative; height: 100%; overflow: hidden; } nav ul { padding: 0; margin: 0 auto; max-width: 1000px; width: 100%; } nav li { display: inline; float: left; height: 40px; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } nav a { color: #fff; display: inline-block; width: auto; text-align: center; text-decoration: none; line-height: 40px; } nav li a { padding: 0 10px; border-right: 1px solid #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } nav li a:link, a:visited { color: white } nav li:last-child a { border-right: 0; } nav a:hover { background: #2098d1; } nav ul li.current-menu-item a:link, .site-header nav ul li.current-menu-item a:visited, .site-header nav ul li.current-page-ancestor a:link, .site-header nav ul li.current-page-ancestor a:visited { font-weight: bold; background: #2098d1; } nav a#pull { display: none; } @media screen and (max-width: 600px) { nav { height: auto; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 100%; float: left; position: relative; } nav li a { border-bottom: 1px solid #fff; border-right: 1px solid #fff; } nav a { text-align: left; width: 100%; text-indent: 25px; } } @media only screen and (max-width: 600px) { nav { border-bottom: 0; } nav ul { display: none; height: auto; } nav a#pull { display: block; background: #86c024; width: 100%; position: relative; } nav a#pull:after { content: ""; background: url('img/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } } @media only screen and (max-width: 320px) { nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #576979; } } }
<nav> <a href="#" id="pull">Menu</a> <ul> <li><a href="#">Home</a> </li> <li><a href="#">Home</a> </li> <li><a href="#">Home</a> </li> <li><a href="#">Home</a> </li> <li><a href="#">Home</a> </li> </ul> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.