在页面上突出显示所选菜单项

在页面上突出显示所选菜单项

关注
发信
关注(28)粉丝(399)

在页面上突出显示所选菜单项

本文介绍了在页面上突出显示所选菜单项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以这一直驱使我疯了一整天，我想要的只是突出当前的李，当你在相应的页面，



我的代码



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

这篇关于在页面上突出显示所选菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 12:34
Powered by LMLPHP ©2024 在页面上突出显示所选菜单项 0.047083