Developing (v7+)

Navigation bar

Permalink March 21, 2011 at 3:54 AM

Hi,

I need a navigation bar that is horizontally oriented and where an "active" entry in the bar has a pre-defined color. The entry should be colored when the corresponding site is shown.

Do anyone know if such a navigation bar exist, or do I have to write my own?

nbruley replied on Mar 22, 2011 at 12:45 am Permalink Reply

If you can't find a pre-made one, I used one here that is fairly simple...
http://kailoon.com/css-sliding-door-using-only-1-image/...

My implementation uses jquery to change the current link so that I could make the button navigation a reusable block.
http://gospelriver.com/bible/bible-version-comparison...

Other options
http://www.instantshift.com/2009/01/11/30-excellent-css-based-navig...

selenwall replied on Mar 22, 2011 at 3:01 am Permalink Reply

On gospelriver.com, when entering just the URL of a page, how does the navigation bar know which menu entry to highlight?

nbruley replied on Mar 22, 2011 at 10:11 am Permalink Reply

Here's my code for the buttons:

<div id="blue">
<ul class="blue">
<li><a title="Overview" href="/bible/bible-version-comparison"><span class="general">Overview</span></a></li>
<li><a title="Comparison of Word Choice" href="/bible/bible-version-comparison/word-comparison"><span class="words">Compare Word Choice</span></a></li>
<li><a title="Readability" href="/bible/bible-version-comparison/readability-comparison"><span class="readability">Compare Readability</span></a></li>
<li><a title="Translation resources" href="/bible/bible-version-comparison#resources"><span>Bible Resources</span></a></li>
<li class="reader-comments"><a title="Comments" href="#reader-comments"><span>Comments</span></a></li>
<li><a title="Poll" href="/bible/bible-version-comparison/readability-comparison#poll"><span>Poll</span></a></li>
</ul>
</div>

Below that, add another block that is different on each page to tell it which is current. Jquery should be loaded on your page by default I believe, so this should work...

<script type="text/javascript">
{
  $(".blue").find(".general").addClass("current");
}
</script>

Then you just need to add CSS. I used two id's because I have two different navs on the same page. Tweak to your liking of course.

/****** Horizontal button Navigation NB *****/
#blue ul, #blue2 ul {
    padding: 5px;
    margin: 10px 0;
    list-style: none;
    float: left;
}
#blue li, #blue2 li {
    float: left;
    display: inline; /*For ignore double margin in IE6*/
    margin: 0 10px;
}
#blue li a, #blue2 li a  {
    text-decoration: none;
    float:left;

Viewing 15 lines of 43 lines. View entire code block.

 
/****** Horizontal button Navigation NB *****/
 
#blue ul, #blue2 ul {
    padding: 5px;
    margin: 10px 0;
    list-style: none;
    float: left;
}
 
#blue li, #blue2 li {
    float: left;
    display: inline; /*For ignore double margin in IE6*/
    margin: 0 10px;
}
 
#blue li a, #blue2 li a  {
    text-decoration: none;
    float:left;
    color: #999;
    cursor: pointer;
    font: 900 14px/22px "Arial", Verdana, sans-serif;
}
 
#blue ul li a span, #blue2 ul li a span {
    margin: 0 10px 0 -10px;
    padding: 1px 8px 5px 18px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
}
 
#blue ul li a:hover, #blue2 ul li a:hover {
    background: url(images/blue-button.gif) no-repeat top right;
    color: #0d5f83;
}
 
#blue ul li a:hover span, #blue2 ul li a:hover span {
    background: url(images/blue-button.gif) no-repeat top left;
    color: #9A1212;
}
 
#blue ul li a, #blue2 ul li a { 
    background: url(images/blue-button.gif) no-repeat top right;
    color: #0d5f83;
}
 
#blue ul li a span, #blue2 ul li a span { 
    background: url(images/blue-button.gif) no-repeat top left;
}
 
.current { /* for button navigation by jquery*/
    color: white;
}

cannonf700 replied on Mar 22, 2011 at 3:05 am Permalink Reply

FYI
Add styling to your .css for this class:
[code]
#menu .nav-selected a
[code]
specifically the .nav-selected a ;
this will style the current link/page you're on.

Forums

Developing (v7+)

Navigation bar

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?