Adding dropdown functionality to the nav bar

	You must be logged in to post

Forum Flexibility 2 Theme Customization Adding dropdown functionality to the nav bar

Print this Post

Page: 1

User

Post

12:37 pm
September 24, 2009

mrmagos

New Member

posts 1

I really like the theme, but I needed dropdowns on the nav bar for the project I was working on. I was able to do this with the PixoPoint Menu plugin and a little theme customization.

First, I needed to make the theme aware of the plugin. Find the following code in header.php

<div id="nav" style="clear:both;">
<ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\\<li([^>]*)>\\<a([^>]*)>(.*?)\\<\\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
</ul>
<div class="clearer"></div>
</div>

There should be 2 instances of this in the file, the first somewhere in the middle preceeded by

<?php if ($flex_nav_position == "above") { ?>

and the second toward the bottom preceeded by

<?php if ($flex_nav_position == "below") { ?>

In both instances, edit the code so it looks like this:

<div id="nav" style="clear:both;">
<?php if (function_exists('pixopoint_menu') && $flex_nav_style == "simple") { pixopoint_menu(); ?>
<?php } else { ?>
<ul>
    <?php if ($flex_nav_home == "no") { ?>
    <?php } else { ?>
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php } ?>
    <?php echo preg_replace('@\\<li([^>]*)>\\<a([^>]*)>(.*?)\\<\\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exclude=&title_li=&depth=1')); ?>
</ul>
<div class="clearer"></div>
<?php } ?>
</div>

This makes it so that when you set your navigation tab style to "simple" (sorry, that's the only style I have it working with currently!) the plugin takes over the nav bar.

At this point, the plugin is also styling the navbar, ignoring the theme's color settings. Thi is fixed by adding some code to the style.php file.

#pixopoint_menu1 {
    height:33px;
    background: url(images/navfhleft.png) left top repeat-x;
    background-color: #<?php echo $flex_nav_barback; ?>;
    margin:0;
    padding-left: 8px;
    }
#pixopoint_menu1 ul {
    border:none;
    background:none;
    margin:0;
    padding:0;
    list-style:none;
    }
#pixopoint_menu1 li {
    border:none;
    background:none;
    line-height:33px;
    z-index:20;
    letter-spacing:0px;
    background:;
    font-weight:bold;
    font-size:14px;
    padding:0;
    margin:0 0px;
    ;float:left;
    font-family:tahoma,sans-serif;
    position:relative;
    }
#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {
    background-color: #<?php echo $flex_nav_tabhvr; ?>;
    }
#pixopoint_menu1 li a {
    border:none;
    background-color: #<?php echo $flex_nav_color; ?>;
    font-family: Arial, Helvetica;
    text-decoration:none;
    display:block;
    padding:0 12px;
    color: #<?php echo $flex_nav_txtclr; ?>;
    }
#pixopoint_menu1 li a:hover {
    border:none;
    text-decoration:none;
    background-position: right -33px;
    color: #<?php echo $flex_nav_hvrcolor; ?>;
    background-color: #<?php echo $flex_nav_tabhvr; ?>;
    }
#pixopoint_menu1 ul ul {
    position:absolute;
    left:-999em;
    top:34px;
    width:120px;
    }
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
    left:auto;
    }
#pixopoint_menu1 ul ul li a {
    padding:8px 8px 0;
    text-transform:normal;
    font-variant:normal;
    }
#pixopoint_menu1 ul ul li {
    letter-spacing:0px;
    color: #<?php echo $flex_nav_txtclr; ?>;
    z-index:20;
    width:120px;
    font-family:helvetica,arial,sans-serif;
    font-size:12px;
    font-weight:normal;
    font-style:normal;
    background: #<?php echo $flex_nav_color; ?>;
    border-bottom:1px solid #<?php echo $flex_sidebar_boxborder; ?>;
    border-left:1px solid #<?php echo $flex_sidebar_boxborder; ?>;
    border-right:1px solid #<?php echo $flex_sidebar_boxborder; ?>;
    margin:0;
    }
#pixopoint_menu1 ul ul li a {
    line-height:22px;
    color: #<?php echo $flex_nav_txtclr; ?>;
    background: #<?php echo $flex_nav_color; ?>;
    text-decoration:none;
    }
#pixopoint_menu1 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {
    color: #<?php echo $flex_nav_hvrcolor; ?>;
    background-color: #<?php echo $flex_nav_tabhvr; ?>;
    text-decoration:none;
    }
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
    color: #<?php echo $flex_nav_hvrcolor; ?>;
    background-color: #<?php echo $flex_nav_tabhvr; ?>;
    }
#pixopoint_menu1 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
    color: #<?php echo $flex_nav_hvrcolor; ?>;
    background-color: #<?php echo $flex_nav_tabhvr; ?>;
    }
#pixopoint_menu1 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
    color: #<?php echo $flex_nav_hvrcolor; ?>;
    background: #<?php echo $flex_nav_tabhvr; ?>;
    }
#pixopoint_menu1 ul ul ul li {
    font-size:1em;}#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
    position:absolute;
    margin-left:-999em;
    top:0;
    width:120px;
    }
#pixopoint_menu1 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
    margin-left:120px;
    }
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
    text-decoration:none;
    }
#pixopoint_menu1 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
    color: #<?php echo $flex_nav_hvrcolor; ?>;
    background-color: #<?php echo $flex_nav_tabhvr; ?>;
    text-decoration:none;
    }
#pixopoint_menu1 li.pixo_search:hover {
    background:none;
    }
#pixopoint_menu1 li.pixo_search form {
    margin:0;
    padding:0;
    }
#pixopoint_menu1 li.pixo_search input {
    font-family:tahoma,sans-serif;}
#pixopoint_menu1 li.pixo_search input.pixo_inputsearch {
    width:100px;
    }
#pixopoint_menu1 li.pixo_right {
    float:right;
    }

You can add that anywhere to the file. I added it to the bottom of mine.

Finally, go in to the Settings for the PixoPoint Menu plugin and set the style sheet to "disable" and save settings.

That's it! Enjoy… Smile

7:17 pm
October 4, 2009

Ryan

Admin

posts 1523

That's great to know. I've used this plugin extensively with my newest theme, and was really impressed with the functionality. The ability to control menu order and items is fantastic.

2:18 pm
November 3, 2009

joeflizo

Member

posts 11

I download the plugin from the the plugin site…but when i want to extract it…error occured…

I don't know what happen…the size is 236kb…it's the right size??

2:46 pm
November 3, 2009

Ryan

Admin

posts 1523

Not sure of the size. Did you attempt to install directly from WP?

8:16 pm
November 3, 2009

joeflizo

Member

posts 11

Great !! Thanks ryan for remind me…I almost forget about it…hehe!

Thanks marmagos !! Great post !!

Anyone has way to intergrate this plugin with other navigation style?? Now we only got this for simple style..

1:03 am
December 7, 2009

drobi81

New Member

posts 1

I love this post and thank you for the code. The only issue I have is I cant get the "child category title" to just show up on one line. I have tried everything I know of. I even tried editing the style.php code a little but everything changed but the title showing up on one line. Here is a link to my blog so you can see what I am talking about http://icanlearnitonline.com/howtopoledance/

Thanks so much for anyones help with this! Confused

2:05 pm
January 5, 2010

dmzidek1

Member

posts 4

Hi All,

I have changed my code in the header.php as shown, however, I'm getting this weird repeating menu when I do it. The menu is repeating over and over as you can see here http://www.wellnessdrops.com/blog

Any ideas how to fix? It looks like the drop-down is working in there, but just has all these multiple instances.

Any help greatly appreciated!

Kindly,

Diane

5:51 pm
January 5, 2010

dmzidek1

Member

posts 4

Update to my last post. I did get the nav working – almost – with one issue. The child pages that show when you hover

on the main pages are appearing as if behind the main blog layer – I can see them (halfway) but then the main blog page covers

them up. Any suggestions on how to fix this?

11:44 pm
May 22, 2010

Imganz

Singapore

Member

posts 3

Hi,

Good day folk,

I tried following the step you laid out but got no success of getting it work on my

blog. Will you mind giving me some pointers.

Thanks

http://www.stripthatfatsecret.com

Thankx

Alan

Page: 1

FlexibilityTheme.com