Drop Down Menu Mod

[Dan Nickerson]

IN VERSION 2.2 WE ADDED DROP DOWN SUPPORT AND THIS MOD IS NO LONGER NECESSARY

We have customers who requested drop down menu support for Socrates

I've created a mod that will now allow you to use a drop down menu to replace your primary navbar.

I want to emphasize that this is for semi-advanced users, and I would like to request that you not ask us about customization..

The plugin you'll be installing has lots of info on this on their site.

Here's my drop down menu test installation.

http://socratestheme.com/dropdown/

Here's the exact process I used to install it.

Step 1: Install the PixoPoint Menu Plugin via the plugin dashboard.

Step 2: You need to edit the header.php file in Appearance > Editor

Replace

<!-- Main Nav -->
<?php if (!$primaryNav['display']) { ?>
<div class="im-nav"><a href="<?php bloginfo('url') ?>/wp-admin/admin.php?page=functions.php">Please configure in Socrates Admin Panel</a></div><!-- /close im-nav -->
<?php } else if ($primaryNav['display'] == 'block' ){ ?>
<div class="im-nav">
<?php
socrates_generate_nav_links($primaryNav, '');
?>
</div><!-- /close im-nav -->
<?php } else {?>
<div class="im-nav" style="background:none"></div><!-- /close im-nav -->
<?php } ?>

<!-- Search Form -->
<div id="im-searchForm">
<form method="GET" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" class="searchBox" id="s"
onblur="this.value=(this.value=='') ? 'search' : this.value;"
onfocus="clearText(this);" value="" />
<input type="image" id="searchBtn" name="searchBtn"
src="<?php bloginfo('template_url'); ?>/images/search.png"
onmouseover="this.src='<?php bloginfo('template_url'); ?>/images/searchOv.png'"
onmouseout="this.src='<?php bloginfo('template_url'); ?>/images/search.png'" border="0" />
</form>
</div>
<?php } ?>
<!-- END HEADER SECTION -->

with

<!-- Main Nav --> <div class="ddnav">
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?></div>
<!-- /close im-nav -->


<!-- Search Form -->
<div id="im-searchForm">
<form method="GET" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" class="searchBox" id="s"
onblur="this.value=(this.value=='') ? 'search' : this.value;"
onfocus="clearText(this);" value="" />
<input type="image" id="searchBtn" name="searchBtn"
src="<?php bloginfo('template_url'); ?>/images/search.png"
onmouseover="this.src='<?php bloginfo('template_url'); ?>/images/searchOv.png'"
onmouseout="this.src='<?php bloginfo('template_url'); ?>/images/search.png'" border="0" />
</form>
</div>

<?php } ?>
<!-- END HEADER SECTION -->

Step 3: Edit Style.css in Appearance > Editor

Find..

.im-topAds { padding:0px 10px; margin:-15px 0px 10px; height:90px;}

And change to

.im-topAds { padding:0px 10px; margin:0px 0px 10px; height:90px;}

Add to bottom of stylesheet..

.ddnav { top:-18px; position:relative; z-index:4; padding:5px 0px 0px 4px; width:973px;}

Once you've completed these 3 steps you can then use the PixoPoint Menu settings panel for the rest of setup.

You can control all aspects of the font design, color, height, size, backgrounds etc, using their own CSS.

You can add pages, categories, links, posts, comments etc to the drop down.

I have to admit it's pretty sweet.

[JustBlogn]

Is it possible that this will be included as an option in a future upgrade? Since I'm not a semi-advanced user, I'll assume I shouldn't attempt this on my own, yet it is something I need.

[Dan Nickerson]

It's possible we'll have a switch for it in the nav section in a future update, not sure as of yet. It depends if people use it.. most people don't.

Honestly, you already know how to edit the files. As long as you have a backup of your header.php file, you're advanced enough to try it.

[ssheldon]

Hi Dan,

Which file would I edit to add the menu to the sidebar? I am using the 300px left sidebar option.

By edit, I mean add the line of code:

<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?></div>

I tried the obvious sidebar.php and sidebar2.php

Thanks!

Sue

[Dan Nickerson]

There's nothing to be added to the sidebar.. this is for the primary navbar only, it won't work in sidebars.

[ebepower]

Hi, thanks for the clear, easy instructions!

One quick question, step 3 says to add to the bottom of style.css the following code:

.ddnav { top:-18px; position:relative; z-index:4; padding:5px 0px 0px 4px; width:973px;}

but I noticed that exact code is already there. Is it supposed to occur twice? Or are we good-to-go with it there once?

Thanks!

P.S. you're right... the drop down menu is pretty sweet!

[lynnth]

Good to go once it is there.

[Dan Nickerson]

I decided to add the ddnav css to version 2.03 for convenience.

[iatwre2010]

Thanks Dan!

One of the reasons I have loved Thesis theme is the ability to have a drop down menu...

I'll test this out!

[AlexWebley]

I decided to add it to version 2.03 for convenience.

This could be a decider on whether I purchase or not.

When I looked into Socrates theme recently I saw the earlier part of this post about coding and despite being able to do that kind of alteration, it put me off.

Great to see that it is now included as standard.