CODEWITHSUNDEEP
css
FeifanZ
FeifanZ

Reputation: 16316

Sliding Highlight in Nav Bar

I currently have this on a webpage I'm making:

HTML

<div id="pageHeader">
    <nav id="siteNav">
        <ul>
            <li id="currentNavTab"><a href="index.php"><span>Home</span></a></li>
            <li><a href="services.php"><span>Services</span></a></li>
            <li><a href="gallery.php"><span>Gallery</span></a></li>
            <li class="LastNavTab"><a href="contact.php"><span>Contact</span></a></li>
        </ul>
    </nav>
</div>

CSS

nav#siteNav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

nav#siteNav ul {
padding: 0;
background-image: url('NavTabsBG.jpg');
box-shadow: inset 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}

nav#siteNav li {
display: inline;
width: 240px;
padding-left: 50px;
padding-right: 50px;
}

nav#siteNav a {
display: inline-block;
padding: 10px;
color: rgb(255, 235, 200);
font-size: 36px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.6);
}

The code results in something like this: Current webpage appearance

I would like to have it so that the currently selected tab takes on a highlight, which can either be a bitmap or generated with background-gradient; something like this mockup:

What I would like the page to look like

I'm having issues with the layout. I tried to put the background behind the li's, but that didn't display correctly:

What didn't work

Being a relative amateur at web development I don't know how to fix this and get the result I want. An additional issue is that I would like the highlight to be masked within the rounded border. Any help would be appreciated!

Upvotes: 1

Views: 198

Answers (1)

Paulo R.
Paulo R.

Reputation: 15609

Here's a fiddle. http://jsfiddle.net/57VC8/1/

What i did:

  1. Set display inline-block on the li's. Why? Putting inline-blocks or block (that's elements with one of those displays) inside inline elements just might give you some hard to understand problems.
  2. Set all the width's and paddings on the a element and not on the li.
  3. Added a class "current" to the currently selected link, through which you'd apply whichever styles you want.

Upvotes: 1

Related Questions