发表新帖
发表新帖

Active Menu Highlight CSS

后端 未结
关注
11 850
孤独总比滥情好
孤独总比滥情好 2020-11-29 00:54

I want to highlight the current menu you have click. I\'m using CSS, but it is now working.

here is my css code:

#sub-header ul li:hover{ background-
相关标签:
11条回答
  • 再見小時候
    2020-11-29 01:33

    Answer: You need CSS for “current” link here is tut.

    Description of jQuery menu nav

    Sample : One of meny solution

    Its working for me

    0 讨论(0)
  • 傲寒
    2020-11-29 01:38

    Following @Sampson's answer, I approached it this way -

    HTML:

    1. I have a div with content class in each page, which holds the contents of that page. Header and Footer are separated.
    2. I have added a unique class for each page with content. For example, if I am creating a CONTACT US page, I will put the contents of the page inside <section class="content contact-us"></section>.
    3. By this, it makes it easier for me to write page specific CSS in a single style.css.

    <body>
    <header>
        <div class="nav-menu">
            <ul class="parent-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact us</a></li>
                ...
            </ul>
        </div>
    </header>

    <section class="content contact-us">
        Content for contact us page goes here
    </section>

    <footer> ... </footer>

</body>

    CSS:

    1. I have defined a single active class, which holds the styling for an active menu.

    .active {
    color: red;
    text-decoration: none;
}
    <body>
    <header>
        <div class="nav-menu">
            <ul class="parent-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact us</a></li>
                ...
            </ul>
        </div>
    </header>

    <section class="content contact-us">
        Content for contact us page goes here
    </section>

    <footer> ... </footer>

</body>

    JavaScript:

    1. Now in JavaScript, I aim to compare the menu link text with the unique class name defined in HTML. I am using jQuery.
    2. First I have taken all the menu texts, and performed some string functions to make the texts lowercase and replace spaces with hyphens so it matches the class name.
    3. Now, if the content class have the same class as menu text (lowercase and without spaces), add active class to the menu item.

    var $allMenu = $('.nav-menu > .parent-nav > li > a');
var $currentContent = $('.content');
$allMenu.each(function() {
  $singleMenuTitle = $(this).text().replace(/\s+/g, '-').toLowerCase();
  if ($currentContent.hasClass($singleMenuTitle)) {
    $(this).addClass('active');
  }
});
    .active {
  color: red;
  text-decoration: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <header>
    <div class="nav-menu">
      <ul class="parent-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact us</a></li>
        ...
      </ul>
    </div>
  </header>

  <section class="content contact-us">
    Content for contact us page goes here
  </section>

  <footer> ... </footer>

</body>

    Why I Approached This?

    1. @Sampson's answer worked very well for me, but I noticed that I had to add new code every time I want to add new page.
    2. Also in my project, the body tag is in header.php file which means I cannot write unique class name for every page.
    0 讨论(0)
  • 自闭症患者
    2020-11-29 01:40

    You should refer to the current element and not all elements matching your selector.

    $("#mainMenu td").click(function() {
$(this).css('background-color', '#EDEDED');

    });

    I´d also recommend you to use CSS classes instead of setting the CSS properties this way.

    That would be something like;

    $("#mainMenu td").click(function() {
$(this).addClass('selected');

    });

    together with;

    #mainMenu td.selected {

    background-color: #EDEDED; }

    0 讨论(0)
  • 孤城傲影
    2020-11-29 01:45

    Try this (Do copy and paste):

    Test.html:- 

    <html>
 <link rel="stylesheet" type="text/css" href="style.css">
 <a class="fruit" href="#">Home</a></span>
 <a class="fruit"  href="#">About</a></span>
 <a class="fruit"  href="#">Contact</a></span>
</html>

    style.css:-

    a:link{
 color:blue;
}

a:visited{
 color:purple;
}

a:hover{
 color:orange;
}
a:focus{
color:green;
}

a:active{
 color:red;
}

a:active{
 color:yellow;
}
    0 讨论(0)
  • 情深已故
    2020-11-29 01:45

    Another variation with a simple 2-line listener

    $( ".menu_button" ).click(function() {

    $( ".menu_button" ).removeClass('menu_button_highlight');
    $(this).addClass('menu_button_highlight');
});

    =====

        <a class='menu_button' href='#admin'>Admin</a>
    <br/>

    <a class='menu_button' href='#user_manager'>User Manager</a>
    <br/>

    <a class='menu_button' href='#invite_codes'>Invite Codes</a>

    ====

    .menu_button {

    padding: 0 5px;
}

.menu_button_highlight {

    background: #ffe94c;
}
    0 讨论(0)
  • 北荒
    2020-11-29 01:46

    Add a class to the body of each page:

    <body class="home">

    Or if you're on the contact page:

    <body class="contact">

    Then take this into consideration when you're creating your styles:

    #sub-header ul li:hover,
body.home li.home,
body.contact li.contact { background-color: #000;}

#sub-header ul li:hover a,
body.home li.home a,
body.contact li.contact a { color: #fff; }

    Lastly, apply class names to your list items:

    <ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

    This point, whenever you're on the body.home page, your li.home a link will have default styling indicating it is the current page.

    0 讨论(0)
 看不清?
提交回复
热议问题