Jquery/CSS/HTML- Sliding highlight menu with the HTML I already have

Question

I have this HTML:

 <nav>
        <div id="nav-show">
            <a class="m-btn rnd black mobile-hide" href="">Home</a>
            <a class="m-btn rnd black mobile-hide" href="">About</a>
            <a class="m-btn rnd black mobile-hide" href="">Projects</a>
            <a class="m-btn rnd black mobile-hide" href="">Quality</a>
            <a class="m-btn rnd black mobile-hide" href="">Products</a>
            <a class="m-btn rnd black mobile-hide" href="">Contact Us</a>
            <a class="m-btn rnd black mobile-hide" href="">Links</a>
        </div>

How could I possibly implement something like this? (I am a JS noob)

As the article says:

The Idea

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it's animation abilities. As such, the "magic line" will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match

I don't really want to change the HTML due to various factors.

I have jQuery etc, it would need to be compatibe with IE8 up.

I did try this: Code here

Harley

[WhatHaveYouTried](http://whathaveyoutried.com)? I am tired of typing this again and again — Ajinkya, Jun 17 '13 at 10:14
The tutorial is there, have you tried implementing the code from the tutorial, you'd obviously need to tweak it to suit your markup.. — painotpi, Jun 17 '13 at 10:15
Rather than asking people to do the work for you, why don't you read through the tutorial and try to implement it yourself. You might learn something. — billyonecan, Jun 17 '13 at 10:16
@Karna Tried shoehorning the script to work with what I already had. Didn't work. Googled it before asking question, as always! :) — harley_woop, Jun 17 '13 at 10:16
@harley post whatever you have tried, try setting it up on jsfiddle.net — painotpi, Jun 17 '13 at 10:17
@harley: Show us what have you tried. Some piece of code. and what didnt work. (Stackoverflow works this way only) — Ajinkya, Jun 17 '13 at 10:20
@badZoke This is what I was doing [http://codepen.io/anon/pen/swhgu](http://codepen.io/anon/pen/swhgu) — harley_woop, Jun 17 '13 at 10:23

score 1 · Accepted Answer · answered Jun 17 '13 at 10:58

All you need to do is a bit of tweaking,

The problem with the code you were implementing was mainly trivial errors,

Your markup has id="nav-show", but your js was using $(".nav-show").

Syntax errors with they way you were declaring variables, best practice (for small js), define each new variable on a different line,

var $el;
var leftPos;
var newWidth;
var $mainNav = $("#nav-show");

A logical error with the way width was being calculated for the #magic-line, so,

This

newWidth = $el.parent().width();

Gets replaced with

newWidth = $el.width();

test link

I changed `$(".nav-show")`, shortly afterwards... (Or so I thought) I'll look at the jsFiddle and then probably accept your answer :) Thankyou! — harley_woop, Jun 17 '13 at 11:06

CodeHunter · Answer 2 · 2013-06-17T10:38:54.993

0

well u can do this with the help of css also

    .menu {
        position:fixed;
        top:142px;
        right:36px;
        float:right;
        height:50px;
        border-radius:10px;
        box-shadow:0px 0px 3px 0px #FFFFFF;
        background-image:url(../img/m3nuta8.png);
        }        
    .menu ul {
            margin:0px;
            padding:1px 1px 0px 1px;
            }
        .menu ul li {
            float: left;
            display:inline;
            padding:0px;
            border-right:thick #FFF;
            margin:0px;
            height:48px;
            }
        .menu ul li:hover {
            background-color:#3F3;
            box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
            }
        .menu ul li:first-child:hover {
            border-bottom-left-radius:10px;
            border-top-left-radius:10px;
            }
        .menu ul li:last-child:hover {
            border-bottom-right-radius:10px;
            border-top-right-radius:10px;
            }
        .menu ul li a {
            margin:inherit;
            alignment-adjust:central;
            float:right;
            font-family:Kreon, sans-serif;
            font-size:20px;
            color:#FFFFFF;
            text-decoration:none;
            padding:12px 15px 10px 15px;
            text-shadow:2px 2px 3px #000000;
            height:40px;
            }

and this is the html code :

<div id="menu" class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</div>

edited Jun 17 '13 at 10:38

answered Jun 17 '13 at 10:25

CodeHunter

378
1
3
16

Didn't seem to work for me? Thanks anyway – harley_woop Jun 17 '13 at 10:27
ids and classes can't start with numbers – Pete Jun 17 '13 at 10:28
@Pete Just curious, why not? Will classs/id's that start with numbers not actally work, or is it just good practice? – harley_woop Jun 17 '13 at 10:30
1

u should atlest try @harley – CodeHunter Jun 17 '13 at 10:32
@harley they won't work – Pete Jun 17 '13 at 10:35
@Codehunter Too lazy :) OK, I did, and `color:red;` had no effect. Why though?? What practical impact can a number have as opposed to a letter? – harley_woop Jun 17 '13 at 10:35
@harley it was just a mistake as Pete said they wont work – CodeHunter Jun 17 '13 at 10:40
Apparently in html5 you may be able to - http://stackoverflow.com/questions/7987636/why-cant-i-have-a-numeric-value-as-the-id-of-an-element – Pete Jun 17 '13 at 10:42
@Peta thanks for the link :) ancidently i wrote that few days back ,actually i was planing something like `active` class for it – CodeHunter Jun 17 '13 at 10:49

Jquery/CSS/HTML- Sliding highlight menu with the HTML I already have

2 Answers2