dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Website active menu item one page scroll

  1. #1
    Join Date
    Jun 2017
    Posts
    14

    Website active menu item one page scroll

    Hi,

    I am wondering if someone could help me out with some JavaScript for my website or http://hcldesign.co.uk/ which is a website I'm developing.

    The website is a one page site mostly in Wordpress and the navigation menu items scroll the page down. I am needing some code which will highlight the active page/menu item but the issue is they are page anchors and I don't know how to code this. I don't believe it can be done with CSS which is why I'm here. It would be good if it could be the menu hover effect shown in the active menu item, or just a different colour of text.

    Thanks

    Harvey

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,799
    Please post the code examples here for people to see.

    Generally this would be set at the server whilst the page is being rendered, the particular menu is give a different className or additional CSS to highlight it but mostly this is a feature best set at the server, relying on JavaScript is still hit and miss today, some browsers don't support JavaScript, a fair few people have JavaScript disabled, this can pose a problem if you rely on JavaScript being present. If you code as if JavaScript isn't available and then add in JavaScript after for those who have it, you will have a page that will show in all browsers as you intend and use JavaScript as an additional layer if it can be used.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jun 2017
    Posts
    14
    Hi,

    I would prefer a way to do this with CSS anyway has it would make life easier for me.
    Below is my current code for my menu style.

    Code:
    #menu-primary-menu {
      font-family: 'roboto', roboto, roboto;
      text-align: center;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 1px;
    }
    #menu-primary-menu * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
    }
    #menu-primary-menu li {
      display: inline-block;
      list-style: outside none none;
      margin: 0em 1.5em;
      padding: 0;
    }
    #menu-primary-menu a {
      padding: 0.25em 0;
      color: #fff;
      position: relative;
      text-decoration: none;
      display: inline-block;
    }
    #menu-primary-menu a:before,
    #menu-primary-menu a:after {
      height: 3px;
      position: absolute;
      content: '';
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
      background-color: #3588dc;
      width: 0;
    }
    #menu-primary-menu a:before {
      top: 0;
      left: 0;
    }
    #menu-primary-menu a:after {
      bottom: 0;
      right: 0;
    }
    #menu-primary-menu a:hover {
    	color: #fff;
    }
    
    #menu-primary-menu .active a {
      color: #fff;
    }
    
    
    #menu-primary-menu a:hover:before,
    #menu-primary-menu .current a:before,
    #menu-primary-menu a:hover:after,
    #menu-primary-menu .current a:after {
      width: 100%;
    }
    
    #menu-primary-menu a {
    font-size: 14px;
    margin: -10px
    }

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,799
    Moved to CSS

    I would also ask for you to post any HTML that relates to the menu, it would be helpful.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Jun 2017
    Posts
    14
    Hi,

    Thanks for moving this.

    It is a wordpress site so i have not changed any HTML. It is in PHP files i believe and I'm not too great with PHP. Would you know where i can find what you need?

    Thanks,

    Harvey

  6. #6
    Join Date
    Dec 2012
    Posts
    1,390
    Here is a demo where you can lookup how to do this:
    https://jsfiddle.net/cse_tushar/Dxtyu/141/

  7. #7
    Join Date
    Jun 2017
    Posts
    14
    This is JavaScript, This thread got moved here because it was apparently possible with CSS?

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 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