CSS 菜单 - 选择 child 后导航栏拒绝突出显示 parent
CSS Menu - Nav Bar refuses to highlight parent after selecting child
我知道那里有 400 个这样的线程,但似乎每个人的代码都有点不同:我设置了我的 CSS,以便每次将鼠标悬停在导航中的页面,当单击 link 页面时,蓝色条停留在它上面。当我单击带有 drop-down 菜单的 link 之一时,我无法让它停留在 parent 页面上。我能够让一个蓝色条出现在下拉列表中(笑),但根本无法让它与 parent 保持一致。我已经尝试了所有的祖先技巧,所有 menu-current 技巧,我只是束手无策。我将永远感激任何帮助。
/*** ----------------------------CHANGE THE COLOR OF THE SQUARES UNDERNEATH THE NAVIGATION BAR HERE ------------------------------- ***/
nav ul li a:hover, nav ul li a.current {
border-bottom: 5px solid #00BCF2;
color: #00BCF2;
}
/*** THIS WILL PROBABILY GET US TO WHERE WE WANT TO BE WITH ADDING AND HOVERING THE PARENT LINK
nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a {
background-color: #536f9e !important;
color: #ffffff !important;
}
***/
/*** add publications from box site level 1 here ***/
/**** Dropdown ****/
/*** ----------------------------- CHANGE THE LOGO OF THE DROPDOWN ARROW ------------------------------ ***/
/*** ----------------------------- CHANGE THE height OF THE DROPDOWN menu ------------------------------ ***/
.dropdown{
padding: 14px 16px 37px 10px;
background: url('images/dropdown_icon.png') no-repeat 99% 21px;
}
.dropdown:hover{
border-bottom: none;
}
nav ul ul{
display: none;
margin: 0;
position: absolute;
background-color: #000;
z-index: 1;
}
nav ul li:hover ul{
display: block;
opacity: 0.9;
}
nav ul li ul li{
margin: 0;
}
/*** ----------------------------- CHANGE THE WIDTH OF THE DROPDOWN MENU ------------------------------ ***/
nav ul li ul li a{
margin: 0;
padding: 5px 10px;
width: 100px;
}
/*** ----------------------------- CREATE BLUE BARS INSIDE OF DROPDOWN ------------------------------ ***/
nav ul li:hover ul li a:hover, nav ul li:hover ul li a.current{
border-bottom: none;
}
根据要求,HTML 我的开头 --> header 是:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXXXXX</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
<!--END OF HEADER -->
});
});
</script>
</head>
<body>
<div id="wrapper">
<!--========================== L O G O & N A V B A R ============================-->
<header>
<div id="logo">
<a href="home.html"><img src="images/xylophone.png" alt="YouRock" /></a>
</div>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Founders</a></li>
<li><a href="#" class="dropdown">Pipeline</a>
<ul>
<ul>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="Phases.html">Phase I / II</a></li>
在 timeline.html 和 phases.html 上放这个
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Founders</a></li>
<li><a href="#" class="dropdown" class="current">Pipeline</a>
<ul>
<ul>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="Phases.html">Phase I / II</a></li>
,别把它放在其余的,et violla
嗯,检查活动 link 是否在下拉框内的最简单方法是设置 class。此外,将包含 .dropdown
link 的 class 设置为 <li>
可能很有用,以便轻松实现它:
<li class="drop-li"><a href="#" class="dropdown">Pipeline</a>
<ul>
<li><a href="timeline.html" class="dropdowned">Timeline</a></li>
<li><a href="Phases.html" class="dropdowned">Phase I / II</a></li>
</ul>
现在您可以像这样突出显示所需的父级 link:
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
if ($(this).attr('class') == 'dropdowned'){
$(this).closest('.drop-li').children('a').addClass('current');
}
else{
$(this).addClass('current');
}
}
}
无论您有多少个下拉菜单以及您的 link 和模板的名称是什么,这样它都会起作用。
我知道那里有 400 个这样的线程,但似乎每个人的代码都有点不同:我设置了我的 CSS,以便每次将鼠标悬停在导航中的页面,当单击 link 页面时,蓝色条停留在它上面。当我单击带有 drop-down 菜单的 link 之一时,我无法让它停留在 parent 页面上。我能够让一个蓝色条出现在下拉列表中(笑),但根本无法让它与 parent 保持一致。我已经尝试了所有的祖先技巧,所有 menu-current 技巧,我只是束手无策。我将永远感激任何帮助。
/*** ----------------------------CHANGE THE COLOR OF THE SQUARES UNDERNEATH THE NAVIGATION BAR HERE ------------------------------- ***/
nav ul li a:hover, nav ul li a.current {
border-bottom: 5px solid #00BCF2;
color: #00BCF2;
}
/*** THIS WILL PROBABILY GET US TO WHERE WE WANT TO BE WITH ADDING AND HOVERING THE PARENT LINK
nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a {
background-color: #536f9e !important;
color: #ffffff !important;
}
***/
/*** add publications from box site level 1 here ***/
/**** Dropdown ****/
/*** ----------------------------- CHANGE THE LOGO OF THE DROPDOWN ARROW ------------------------------ ***/
/*** ----------------------------- CHANGE THE height OF THE DROPDOWN menu ------------------------------ ***/
.dropdown{
padding: 14px 16px 37px 10px;
background: url('images/dropdown_icon.png') no-repeat 99% 21px;
}
.dropdown:hover{
border-bottom: none;
}
nav ul ul{
display: none;
margin: 0;
position: absolute;
background-color: #000;
z-index: 1;
}
nav ul li:hover ul{
display: block;
opacity: 0.9;
}
nav ul li ul li{
margin: 0;
}
/*** ----------------------------- CHANGE THE WIDTH OF THE DROPDOWN MENU ------------------------------ ***/
nav ul li ul li a{
margin: 0;
padding: 5px 10px;
width: 100px;
}
/*** ----------------------------- CREATE BLUE BARS INSIDE OF DROPDOWN ------------------------------ ***/
nav ul li:hover ul li a:hover, nav ul li:hover ul li a.current{
border-bottom: none;
}
根据要求,HTML 我的开头 --> header 是:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXXXXX</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
<!--END OF HEADER -->
});
});
</script>
</head>
<body>
<div id="wrapper">
<!--========================== L O G O & N A V B A R ============================-->
<header>
<div id="logo">
<a href="home.html"><img src="images/xylophone.png" alt="YouRock" /></a>
</div>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Founders</a></li>
<li><a href="#" class="dropdown">Pipeline</a>
<ul>
<ul>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="Phases.html">Phase I / II</a></li>
在 timeline.html 和 phases.html 上放这个
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Founders</a></li>
<li><a href="#" class="dropdown" class="current">Pipeline</a>
<ul>
<ul>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="Phases.html">Phase I / II</a></li>
,别把它放在其余的,et violla
嗯,检查活动 link 是否在下拉框内的最简单方法是设置 class。此外,将包含 .dropdown
link 的 class 设置为 <li>
可能很有用,以便轻松实现它:
<li class="drop-li"><a href="#" class="dropdown">Pipeline</a>
<ul>
<li><a href="timeline.html" class="dropdowned">Timeline</a></li>
<li><a href="Phases.html" class="dropdowned">Phase I / II</a></li>
</ul>
现在您可以像这样突出显示所需的父级 link:
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
if ($(this).attr('class') == 'dropdowned'){
$(this).closest('.drop-li').children('a').addClass('current');
}
else{
$(this).addClass('current');
}
}
}
无论您有多少个下拉菜单以及您的 link 和模板的名称是什么,这样它都会起作用。