PDA

View Full Version : Tabbed navbar in DW 5.5


Rosie
02-17-2012, 05:56 PM
Hiya,
My client has asked for my navbar to have a 'down' state to make it clear which page he's on. I've always done this before by creating buttons in Photoshop, then in DW8 I simply did Insert Image Object/ Insert Navbar.

Now I've finally invested in 5.5 I can't find the Insert Navbar option.

Am I now supposed to be using the Spry Menu bar and replacing the text with images? Or is there a better, simpler way?

Thanks for your advice

Rosie
02-18-2012, 11:08 PM
Ok, well after lots of searching, hair tearing out and nail-biting, I've found a way! Let me know if anyone else needs to know how.

edbr
02-20-2012, 12:14 AM
its always good to post answers to problems, so please do

Rosie
02-23-2012, 08:02 AM
Well I haven't found a new 'insert navbar', but I have found how to build a navbar with a 'down' state, without using images - which for me is much easier!

Basically you have to give each page an id in the <body> tag, which means you can format the link on that page only. So Simple!


<body id="home">

<div id="navcontainer">
<ul id="navlist">
<li><a id="nav-home" href="home.html">Home</a></li>
<li><a id="nav-about" href="about.html">About</a></li>
<li><a id="nav-shows"href="shows.html">Shows</a></li>
<li><a id="nav-credits"href="credits.html">Credits</a></li>
</ul>
</div>

ANd the css is:
ul#navlist
{
margin: 0;
padding: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
#home #navcontainer #navlist li a#nav-home,
#about #navcontainer #navlist li a#nav-about,
#shows #navcontainer #navlist li a#nav-shows,
#credits #navcontainer #navlist li a#nav-credits
{
color: #33F;
background: #6F0;
}

A better explanation can be found here: http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

Hope that helps!

Corrosive
02-23-2012, 03:55 PM
Good skills :)