在页面上突出显示所选菜单项 [英] Highlight selected menu item when on page
本文介绍了在页面上突出显示所选菜单项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以这一直驱使我疯了一整天，我想要的只是突出当前的李，当你在相应的页面，
我的代码
HTML
< div id = >
<！ - 菜单切换 - >
< a href =＃menuid =menuLinkclass =menu-link active>
< span>< / span>
< / a>
< div id =menu>
< div class =pure-menu pure-menu-open>
< a class =pure-menu-headinghref =pure.html> Nathaniel Harman< / a>
< ul class =nav>
< li>
< a href =software.html>
< span class =icon-macintoshstyle =vertical-align：middle>< / span> SOFTWARE< / a>
< / li>
< li>
< a href =frameworks.html>
< span class =icon-painting-roll-streamlinestyle =vertical-align：middle>< / span> FRAMEWORKS< / a>
< / li>
< li>
< a href =lang.html>
< span class =icon-ink-pen-streamlinestyle =vertical-align：middle>< / span> LANGUAGES< / a>
< / li>
< li>
< a href =projects.html>
< span class =icon-crop-streamlinestyle =vertical-align：middle>< / span> PROJECTS< / a>
< / li>
< li>
< a href =exp.html>
< span class =icon-monocle-mustache-streamlinestyle =vertical-align：middle>< / span> EXPERINECE< / a>
< / li>
< li>
< a href =production.html>
< span class =icon-design-graphic-tablet-streamline-tabletstyle =vertical-align：middle>< / span> IN PRODUCTION< / a>
< / li>
< li>
< a href =development.html>
< span class =icon-barista-coffee-espresso-streamlinestyle =vertical-align：middle>< / span> IN DEVELOPMENT< / a>
< / li>
< li>
< a href =contact.html>
< span class =icon-map-streamline-userstyle =vertical-align：middle>< / span> CONTACT< / a>
< / li>
< / ul>
CSS
#menu {
margin-left：-200px; / *#menuwidth * /
width：200px;
position：fixed;
top：0;
left：0;
bottom：0;
z-index：1000; / *所以菜单或其navicon停留在所有内容* /
background：＃191818;
overflow-y：auto;
-webkit-overflow-scrolling：touch;
}
#menu a {
color：＃999;
border：none;
padding：0.6em 0 0.6em 0.6em;
}
#menu .pure-menu，
#menu .pure-menu ul {
border：none;
background：transparent;
}
#menu .pure-menu ul，
#menu .pure-menu .menu-item-divided {
border-top： 1px solid＃333;
}
#menu .pure-menu li a：hover，
#menu .pure-menu li a：focus，
#menu .pure-menu span ：hover {
background：＃333;
color：#fff;
}
#menu .pure-menu-selected，
#menu .pure-menu-heading {
background：＃909090;
}
#menu .pure-menu-selected a {
color：#fff;
}
#menu .pure-menu-heading {
font-size：110％;
color：#fff;
margin：0;
}
.menu-link {
position：fixed;
display：block; / *仅在小屏幕上显示* /
top：0;
left：0; / *#menu width* /
background：＃000;
background：rgba（0,0,0,0.7）;
font-size：10px; / *更改此值以增加/减少按钮大小* /
z-index：10;
width：2em;
height：auto;
padding：2.1em 1.6em;
}
.menu-link：hover，
.menu-link：focus {
background：＃000;
}
.menu-link span {
position：relative;
display：block;
}
.menu-link span，
.menu-link span：before，
.menu-link span：after {
background-color ：#fff;
width：100％;
height：0.2em;
}
.menu-link span：before，
.menu-link span：after {
position：absolute;
margin-top：-0.6em;
content：;
}
.menu-link span：after {
margin-top：0.6em;
}
任何帮助将是伟大的我不能弄清楚我要去哪里错误，你可以看到我使用Pure CSS框架
解决方案
最简单的方法是创建一个类，让我们说 current ，并将其分配给每个页面上的 li 元素。例如，您的 software.html 文件应如下所示：
< li class =current>
< a href =software.html>
< span ...>< / span> SOFTWARE< / a>
< / li>
< li>
< a href =frameworks.html>
< span ...>< / span> FRAMEWORKS< / a>
< / li>
frameworks.html 像这样：
< li>
< a href =software.html>
< span ...>< / span> SOFTWARE< / a>
< / li>
< li class =current>
< a href =frameworks.html>
< span ...>< / span> FRAMEWORKS< / a>
< / li>
然后只需风格 .current p>
so this has been driving me crazy all day, all i want is simply to highlight the current li when your on the corresponding page,
excuse the mess but heres my code,
HTML
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link active">
<span></span>
</a>
<div id="menu">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading" href="pure.html">Nathaniel Harman</a>
<ul class="nav">
<li>
<a href="software.html">
<span class="icon-macintosh" style="vertical-align: middle"></span>SOFTWARE</a>
</li>
<li>
<a href="frameworks.html">
<span class="icon-painting-roll-streamline" style="vertical-align: middle"></span>FRAMEWORKS</a>
</li>
<li>
<a href="lang.html">
<span class="icon-ink-pen-streamline" style="vertical-align: middle"></span>LANGUAGES</a>
</li>
<li>
<a href="projects.html">
<span class="icon-crop-streamline" style="vertical-align: middle"></span>PROJECTS</a>
</li>
<li>
<a href="exp.html">
<span class="icon-monocle-mustache-streamline" style="vertical-align: middle"></span>EXPERINECE</a>
</li>
<li>
<a href="production.html">
<span class="icon-design-graphic-tablet-streamline-tablet" style="vertical-align: middle"></span>IN PRODUCTION</a>
</li>
<li>
<a href="development.html">
<span class="icon-barista-coffee-espresso-streamline" style="vertical-align: middle"></span>IN DEVELOPMENT</a>
</li>
<li>
<a href="contact.html">
<span class="icon-map-streamline-user" style="vertical-align: middle"></span>CONTACT</a>
</li>
</ul>
CSS
#menu {
margin-left: -200px; /* "#menu" width */
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus,
#menu .pure-menu span:hover{
background: #333;
color:#fff;
}
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #909090;
}
#menu .pure-menu-selected a {
color: #fff;
}
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
any help would be great i can't figure out where i'm going wrong, as you can see i'm using the Pure CSS framework
解决方案
The simplest way to do this is create a class, let's say current, and assign it to that li element on each individual page. For example, your software.html file would look like this:
<li class="current">
<a href="software.html">
<span ...></span>SOFTWARE</a>
</li>
<li>
<a href="frameworks.html">
<span ...></span>FRAMEWORKS</a>
</li>
While your frameworks.html file would look like this:
<li>
<a href="software.html">
<span ...></span>SOFTWARE</a>
</li>
<li class="current">
<a href="frameworks.html">
<span ...></span>FRAMEWORKS</a>
</li>
Then just style .current accordingly
这篇关于在页面上突出显示所选菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
