dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

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

  1. #1
    Join Date
    Jun 2017
    Posts
    15

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

    Hi,

    I am using the below CSS to on my Wordpress menu bar to show a background when hovered, I want the background to show in the current/selected item as well and I have tried using :active but can't get it working. Any help with this will be appreciated. See code below.

    Code:
    nav a {
      display: inline-block;
      padding: .25em 2em;
      margin: 0em;
      position: relative;
      border-radius: .5em;
      overflow: hidden;
    }
    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);
    }
    Thanks

    Harvey

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,924

    Question

    What is the problem you are having?
    Seems to work fine as is...

    Code:
    <!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>

  3. #3
    Join Date
    Jun 2017
    Posts
    15
    I am only changing the CSS and have not edited the PHP files so I am trying to achieve it with just CSS, in using a Wordpress site so need some help to achieve the menu background highlighted under the currently active page using just CSS or or help with adding it into my Wordpress PHP files.

    I'm uploading my site soon to test in my test host site anyway so can show you what I mean

  4. #4
    Join Date
    Jun 2017
    Posts
    15
    http://camerabeanbags.co.uk/test Here is the link to my test site

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,924

    Question

    Quote Originally Posted by Harveyl12 View Post
    http://camerabeanbags.co.uk/test Here is the link to my test site
    Again, what is the error you are getting?
    What do I click that does not perform as desired?
    Please clarify the problem.

  6. #6
    Join Date
    Jun 2017
    Posts
    15
    Okay, so if you let's say hover over 'shop' on my menu bar you see it gets a grey background behind it. I am wanting it so that if you click on 'shop' and go into the 'shop' page that the grey background stays behind the text showing that it is tue current page the user is on. So basically the hover effect in my nav bar/menu which shows a grey background on hover I want this grey background to stay behind the menu page text on the page the user is currently on so it shows the current page selected... any clearer? Sorry if I'm not explaining this well

  7. #7
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,630
    Take a good look at the attachment and note the times it lists.

    Something to concider
    40% of people abandon a website that takes more than 3 seconds to load.
    Attached Images Attached Images

  8. #8
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,924

    Lightbulb

    Hopefully this will address the desired effect.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Nav buttons </title>
    
    <style>
     .show { display: block; }
     .hide { display: none; }
     .pink { background-color: pink; }
    
     nav a {
       display: inline-block;
       padding: .25em 2em;
       margin: 0.5em;
       position: relative;
       border-radius: .5em;
       overflow: hidden;
    
       text-decoration: none;
       font-size: 1.2em; 
       border: 1px solid blue;
       width: 2em; 
     }
     nav a:before {
       content: '';
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       z-index: -1;
       background: pink;
       transform: scaleX(0);
       transition: transform .25s;
     }
     nav a:hover:before,
     nav .active:before {
       transform: scaleX(1);
     }
    </style>
    
    </head>
    <body>
    <nav>
     <a href="#" data-item="0"> One </a>
     <a href="#" data-item="1"> Two </a>
     <a href="#" data-item="2"> Three </a>
     <a href="#" data-item="3"> Four </a>
     <a href="#" data-item="4"> Five </a>
    </nav>
    
    <div id="container">
     <div class="hide"> Display One </div>
     <div class="hide"> Display Two </div>
     <div class="hide"> Display Three </div>
     <div class="hide"> Display Four </div>
     <div class="hide"> Display Five </div>
    </div>
    
    <script>
    // From: http://www.codingforums.com/html-and-css/385915-css-set-background-when-menu-item-selected.html
    
    function init() {
      var sel = document.querySelectorAll('nav a');  // alert(sel.length);
      for (var i=0; i<sel.length; i++) {
        sel[i].addEventListener('click', function () { showContainer(this.dataset.item); });
      }
    } init();
    
    function showContainer(item) { // alert(item);
      var sel = document.querySelectorAll('#container div');
      for (var i=0; i<sel.length; i++) {
        if (i == item) { sel[i].classList.toggle('hide'); }
                  else { sel[i].classList.add('hide'); }
      }
          sel = document.querySelectorAll('nav a');
      for (var i=0; i<sel.length; i++) {
        if (i == item) { sel[i].classList.toggle('pink'); }
                  else { sel[i].classList.remove('pink'); }
      }
    }
    </script>
    
    </body>
    </html>
    Note: "Train" does have a point. It does take very long to load the page.
    While it do not think it related to the menu design you are trying to achieve,
    it may indicate problems in other areas of your program and should be investigated.
    I have not looked into this area as I have been trying to understand your initial problem. Hopefully the above example will address and put it to rest for you.

    Good Luck!

  9. #9
    Join Date
    Jun 2017
    Posts
    15
    Quote Originally Posted by Train View Post
    Take a good look at the attachment and note the times it lists.

    Something to concider
    How am I able to address my slow loading time issues? It's a Wordpress site just so you know

  10. #10
    Join Date
    Jun 2017
    Posts
    15
    I know about the slow loading time, I am researching into it but do you guys know what I need to do to increase the speeds?

  11. #11
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,630
    30 js load time is 33 seconds
    12 css load time is 12 seconds
    HTML errors
    https://validator.w3.org/nu/?doc=htt...o.uk%2Ftest%2F

    CSS Errors (166) Warnings (507)
    https://jigsaw.w3.org/css-validator/...rning=&lang=en

    Opened your site, hit F12 which opened web developer to the console tab, clicked CSS and seen a lot of errors, so I used validator and css validator to find the errors and they list possible fixes.

    How select the network tab and do the performance analysis. This morning I got 97 seconds for a load time.

    I suggest googling " 3 seconds bounce rate "

    Never use wordpress myself.

  12. #12
    Join Date
    Jun 2017
    Posts
    15
    Okay I will give it a go, any tips on how to do this, how did you find the possible fixes?

  13. #13
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,630
    Read what they say and apply the fix is all I can tell you.

  14. #14
    Join Date
    Jun 2017
    Posts
    15
    Okay, thanks for the info anyway i would have never thought to check these. Got it loading in 5 seconds now instead of 60 seconds. I had my cache turned off while testing as this is my test site as i had some image caching issues. Also had an of JS file referenced in my Functions.PHP file which was causing some extra load time as it could not find the JS file.

    I will try the code suggested in here to fix my issues and will let you know

  15. #15
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,924
    Other than trying to increase your post count,
    what is the purpose of your last two posts
    where no questions were asked and no new information given?

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