$10
Navigation bar styling

On this page: http://phoenixsecurity.ca.c12.previewyoursite.com/

the menu in the black bar at the top of the page needs to be styled to accommodate 3 parent pages and to have their child pages listed under each parent to look like the attached image.

I need them styled to be in Verdana, 12px white font with black background for all pages.

attachment image View Attachment

Jill Chongva | 07/23/10 at 1:23pm | Edit

child pages, nav bar

(3) Possible Answers Submitted...

Last edited:
07/23/10
1:37pm
Tobias Bergius says:
Did you forget the attachment? I can't see it.
- 07/23/10 1:55pm
  
  Jill Chongva says:
  I did forget - it's there now ;)
  
  j

Last edited:
07/23/10
2:34pm

wjm says:

Hi Jill,
This is the html code you need,



<div id="topnavbarright">

<!-- Start of top menu -->

<style type="text/css">

#topnavbarright {

	position:relative;

}

#topnavbarright ul.nav {

	right:0;

	position:absolute;

	background-color:#000;

}

#topnavbarright ul.nav li a {

	font-family:Verdana;

	font-size:12px;

	color:#fff;

}



#topnavbarright ul.nav li li a {

	padding-left:0px;

}

</style>

<ul class="superfish nav clearfix sf-js-enabled">

	<li class="page_item page-item-78 current_page_item"><a href="http://phoenixsecurity.ca.c12.previewyoursite.com/about-phoenix/" title="About Phoenix">About Phoenix</a>

		<ul class='children' style="display: none; visibility: hidden;">

			<li class="page_item page-item-82"><a href="http://phoenixsecurity.ca.c12.previewyoursite.com/about-phoenix/phoenix-leadership/" title="Phoenix Leadership">Phoenix Leadership</a></li>

			<li class="page_item page-item-80 last"><a href="http://phoenixsecurity.ca.c12.previewyoursite.com/about-phoenix/the-phoenix-story/" title="The Phoenix Story">The Phoenix Story</a></li>

		</ul>

	</li>

	<li class="page_item page-item-63"><a href="http://phoenixsecurity.ca.c12.previewyoursite.com/dataloc-online/" title="Dataloc Online">Dataloc Online</a></li>

</ul>

<!-- End of top menu -->

</div>

Here is the full page in .html
http://wordpress.pastebin.com/whMF4h7C

where you can see how it works.
obviously you (or i if you want) have to modify the code that generates the menu.
the css could be included in your styles.css

it is just to show you how it will work.
Tested under Firefox, Chrome and IE

Previous versions of this answer: 07/23/10 at 2:34pm

07/23/10 4:08pm

wjm says:
@Pipin: the above code works because it uses the class "superfish"
what i did was to replicate how the main menu works.

Its just a matter of calling wp_list_pages with the same attributes called for the same menu, and the css will do the rest of the job
07/23/10 4:55pm

wjm says:
Jill, could you paste the code that generates both menus (top and main).
so i can give you the code that will work with my solution..
thanks

Last edited:
07/23/10
7:45pm

Pippin Williamson says:

The answer above won't work because what you are looking for (I believe) is a hover menu, such that the child pages appear only when you hover over the top level menu item. To do this: use a code like the one below:

For the CSS:



.navigation	{

	text-align: left;

	height: 20px;

	font-size: 1.0em;

	float: right;

	width: 100%;

}



.navigation ul {

	margin: 0;

	padding: 0;

	list-style: none;

	height: 32px;

	text-transform: uppercase;

}

.navigation ul li	{

	position: relative;

	float: left;

	height: 100%;

        font: 12px Verdana #fff;

}

.navigation li ul {

	position: absolute;

	top: 25px;

	left: 5px;

	display: none;

	padding-left: 5px;

	z-index: 1000;

	height: auto;

	background: #000;

}

.navigation li ul li ul	{

	position: absolute;

	left: 200px;

	top: 0;

}

.navigation li ul li	{

	width: 200px;

}



.navigation ul li a {

	display: block;

	text-decoration: none;

	padding:5px 5px 5px 0;

}



/* Fix IE. Hide from IE Mac \*/

* html ul li { float: left; }

* html ul li a { height: 1%; }

/* End */



.navigation li:hover ul { 

	display: block; 

}

.navigation li:hover ul li ul { 

	display: none; 

}

.navigation li ul li:hover ul { 

	display: block; 

}

To display the navigation:



<ul class="navigation">

  <?php wp_list_pages('title_li='); ?>

</ul>

Previous versions of this answer: 07/23/10 at 3:06pm | 07/23/10 at 3:09pm

07/23/10 4:42pm

Jill Chongva says:

You are right that I want a hover for the child pages - but what should my header code look like? When I put in the navigation as you have it (thank you!), I get the list of pages, but they are not styled correctly.

Should I be removing the "topnavbar" and "topnavcontent" all together?

This is what I had:



<div id="topnavbar">

	<div id="topnavbarcontent">

		<div class="topnavbarleft">

			<p><img src="http://phoenixsecurity.ca.c12.previewyoursite.com/wp-content/uploads/2010/07/facebook.png"> <img src="http://phoenixsecurity.ca.c12.previewyoursite.com/wp-content/uploads/2010/07/newsletter.png"></p>

		</div>





                

                <div id="topnavbarright">



                <ul class="navigation">



                 <?php wp_list_pages('title_li=&include=78,82,80,63&title_li='); ?>



               </ul>



               </div>



	    

	</div>

</div>

which resulted in the links displaying in black, one under the other with the child pages on the far left and not underneath the parent page in the menu bar.

Attached Image

07/23/10 4:50pm

Pippin Williamson says:





.navigation ul {



	margin: 0;



	padding: 0;



	list-style: none;



	height: 32px;



	text-transform: uppercase;



        tex-align: right;

}



.navigation ul li	{



	position: relative;



	float: right;



	height: 100%;



        font: 12px Verdana #fff;



}



.navigation li ul {



	position: absolute;



	top: 32px;



	display: none;



	padding-left: 5px;



	z-index: 1000;



	height: auto;



	background: #000;



}



.navigation li ul li ul	{



	position: absolute;



	left: 200px;



	top: 0;



}



.navigation li ul li	{



	width: 200px;



}







.navigation ul li a {



	display: block;



	text-decoration: none;



	padding:5px 5px 5px 0;



}







/* Fix IE. Hide from IE Mac \*/



* html ul li { float: right; }



* html ul li a { height: 1%; }



/* End */







.navigation li:hover ul { 



	display: block; 



}



.navigation li:hover ul li ul { 



	display: none; 



}



.navigation li ul li:hover ul { 



	display: block; 



}

07/23/10 4:52pm

Jill Chongva says:
But which part of the header code stays and which goes?
07/23/10 4:58pm

Pippin Williamson says:
As long as you haven't styled topnavbarright in such a way that it would conflict with the .navigation code, you don't have to get rid of anything.

If things don't work, try getting rid of everything except .navigation and see how it works and go from there.
07/23/10 5:25pm

Jill Chongva says:
Unfortunately this solution didn't work. The parent pages were displaying on the right in a dark gray and the child pages were on the far left in the same dark gray.

Thanks for your time though.

07/23/10 5:36pm

Pippin Williamson says:

try this once more, I just noticed a couple of syntax errors in the code I gave you:





ul.navigation {







	margin: 0;







	padding: 0;







	list-style: none;







	height: 32px;







	text-transform: uppercase;







        text-align: right;



}







ul.navigation li	{







	position: relative;







	float: right;







	height: 100%;







        font: 12px Verdana #fff;







}







.navigation li ul {







	position: absolute;







	top: 32px;







	display: none;







	padding-left: 5px;







	z-index: 1000;







	height: auto;







	background: #000;







}







.navigation li ul li ul	{







	position: absolute;







	left: 200px;







	top: 0;







}







.navigation li ul li	{







	width: 200px;







}















.navigation li a {







	display: block;







	text-decoration: none;







	padding:5px 5px 5px 0;







}















/* Fix IE. Hide from IE Mac \*/







* html ul li { float: right; }







* html ul li a { height: 1%; }







/* End */















.navigation li:hover ul { 







	display: block; 







}







.navigation li:hover ul li ul { 







	display: none; 







}







.navigation li ul li:hover ul { 







	display: block; 







}

07/23/10 7:27pm

Jill Chongva says:
Final question - I have a graphic to the right of each of the parent page links, but I don't want it on the child page links - how do I accomplish that?

j
07/23/10 7:30pm

Pippin Williamson says:
You can do it with CSS like this:
```
ul.navigation > li {



  background: url('path/to/your/image.jpg') right top no-repeat;



}
```
The background image here will apply only to the parent pages.

If you need to use unique images for each link you could do it like this:

ul.navigation > li.page-item-ID {

background: url('path/to/your/image-for-page-ID.jpg') right top no-repeat;

}

"ID" would be the unique id number of your page.
07/23/10 8:00pm

Jill Chongva says:
In IE 7, the drop down navigation is going behind the slider - how do I fix that?

j :)
07/24/10 5:50pm

Jill Chongva says:
How do I change the background color for the hover state on the menu? I'd like it to be #D8251E but I'm not sure where to change that.

j :)