dcsimg
www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 20 of 20

Thread: CSS to give active page and background colour on the menu bar

  1. #16
    Join Date
    Jul 2017
    Posts
    4
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>

    <style>
    nav a {
    display: inline-block;
    padding: .25em 2em;
    margin: 0em;
    position: relative;
    border-radius: .5em;
    overflow: hidden;

    text-decoration: none;
    border: 1px solid blue;
    }
    nav a:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    background: #e8e8e8;
    transform: scaleX(0);
    transition: transform .25s;
    }
    nav a:hover:before {
    transform: scaleX(1);
    }
    </style>

    </head>
    <body>
    <nav>
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
    <a href="#">Four</a>
    <a href="#">Five</a>
    </nav>

    </body>
    </html>

  2. #17
    Join Date
    Jun 2017
    Posts
    10
    Hi,

    Sorry its been a while and I've only just got around to testing this.
    Please see here http://camerabeanbags.co.uk/test/ my website.

    On the menu you can see the background goes grey when hovering over the text... How can i set it so the active link/page is grey?

    Non of the code above worked for me? I need some CSS please

    Thanks,

    Harvey

  3. #18
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,828

    Lightbulb

    Something like this?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
     .group:after {
       content: "";
       display: table;
       clear: both;
     }
    
     ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #f1f1f1;
     }
     li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
        float: left;
     }
     li a.active {
        background-color: #4CAF50;
        color: white;
     }
     li a:hover:not(.active) {
        background-color: #555;
        color: white;
     }
    </style>
    </head>
    <body>
    
    <h2>Horizontal Navigation Bar</h2>
    <p>In this example, we create an "active" class with a green background color and a white text. 
    The class is added to the "Home" link.</p>
    
    <ul id="menu" class="group"> <!-- substitute with real href value if not staying on current page -->
      <li><a href="#home" class="active">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
    
    <div id="debug" style="font-size:1.5em"></div>
    
    <script>
    // Modified from: https://www.w3schools.com/css/css_navbar.asp
    // For: http://www.webdeveloper.com/forum/showthread.php?363575-Html5-lt-li-gt-tag&p=1505403#post1505403
    
    function init() {
      var sel = document.getElementById('menu').querySelectorAll('a');
      for (var i=0; i<sel.length; i++) {
        sel[i].addEventListener('click',
          function() {
            for (j=0; j<sel.length; j++) { sel[j].classList.remove('active'); }
            this.classList.add('active'); 
            document.getElementById('debug').innerHTML = this.innerText;
          });
      }
    } init();
    
    </script>
    
    </body>
    </html>

  4. #19
    Join Date
    Jun 2017
    Posts
    10
    Will just using the CSS from your code work? With WorsPress I have never editing the HTML only added CSS

  5. #20
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,828
    Quote Originally Posted by Harveyl12 View Post
    Will just using the CSS from your code work? With WorsPress I have never editing the HTML only added CSS
    Doubtfu it will work without the JSl, but why don't you just try it to find out.
    Easy enough to just comment OUT the JS parts.
    I have never worked with "WorsPress" (???)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles