Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] Horizontal submenu display - how to do it!


  #1  
Old Oct 29, 2010, 11:54 AM
blogmom
 
24 posts · Jun 2009
Smile [SOLVED] Horizontal submenu display - how to do it!

I can't believe I figured this out!! I am so happy!! I want to share this with everyone on the forum searching for a way to have a horizontal submenu. By this I mean, instead of the Category bar, or the Menu2 bar, you can have a list of links (to pages, anchors, whatever) appear in the Category bar area that are specific to the Page that you are on.

Ok, here is my setup:
- I do not have any WP 3.0 Menus defined, although I don't think it matters if you do.
- install plugin "Executable PHP widget"
- create a new Widget area, I called mine "mysubmenu". You do this by going into Theme Options -> Style and Header Area and replacing %cats with <?php bfa_widget_area('name=mysubmenu'); ?> So, overall mine says: %logo %pages <?php bfa_widget_area('name=mysubmenu'); ?>
- Now go to Widgets and drag "PHP Code" into the "mysubmenu" widget
- Edit the code of "PHP Code" to be like mine below. Note that you need to change the Case statement to reference your own Page IDs to match the ones in your Page Bar, plus you will need to edit each link in the <li> to be whatever you want. Also remember to escape your quotes with \ as seen in my sample code.

PHP Code:
<?php

echo "<div id=\"menu2\">";
echo 
"<ul class=\"clearfix rMenu-hor rMenu\" id=\"rmenu\">";

$curr_page_id get_query_var('page_id');

switch (
$curr_page_id) {
    case 
6:
        echo 
"
<li class=\"cat-item cat-item-1\"><a href=\"http://yourlink\">Submenu Item1 for Page 6</a></li>
<li class=\"cat-item cat-item-2\"><a href=\"http://yourlink\">Submenu Item2 for Page 6</a></li>
<li class=\"cat-item cat-item-3\"><a href=\"http://yourlink\">Submenu Item3 for Page 6</a></li>
        "
;
        break;

    case 
10:
        echo 
"
<li class=\"cat-item cat-item-1\"><a href=\"http://yourlink\">Submenu Item1 for Page 10</a></li>
<li class=\"cat-item cat-item-2\"><a href=\"http://yourlink\">Submenu Item2 for Page 10</a></li>
<li class=\"cat-item cat-item-3\"><a href=\"http://yourlink\">Submenu Item3 for Page 10</a></li>
        "
;
        break;

    case 
12:
        echo 
"
<li class=\"cat-item cat-item-1\"><a href=\"http://yourlink\">Submenu Item1 for Page 12</a></li>
<li class=\"cat-item cat-item-2\"><a href=\"http://yourlink\">Submenu Item2 for Page 12</a></li>
<li class=\"cat-item cat-item-3\"><a href=\"http://yourlink\">Submenu Item3 for Page 12</a></li>
        "
;
        break;
    default:
       echo 
"&nbsp; ";
}
echo 
"</ul></div>";
?>
- finally you need to add the code below into Theme Options -> Add HTML/CSS Inserts:

Code:
div#mysubmenu.widget { 
border: none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:auto;
}

div#execphp-3.widget { 
border: none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:auto;
}

div#execphp-3.widget ul li{ 
background: none;
padding: 0px 0px 0px 0px !important;
border-left: 0px;
margin:5px 0px 5px 0px;
display:inline; 
}

div#mysidebar.widget ul li{ 
background: none;
padding: 0px 0px 0px 0px !important;
border-left: 0px;
margin:5px 0px 5px 0px;
display:inline; 
}
Note: if you called your submenu widget area something besides "mysubmenu" then you'll need to edit above.

So how does this work? Well adding the widget area and PHP code should be easy to understand, but what was tricky is the CSS. Wordpress adds class statements that mess everything up, so the CSS insert basically overwrites all the stuff that Wordpress adds. Also if you look at the PHP code of the widget, you'll see that I added a div to mimic "menu2" and also the ul and li are also pretending to be menu2. Because of this, you can use the normal Theme Options to style your menu bar without needing to hardcode it.

Cool, huh??? Wow, I am so proud of myself for hacking this all together!!! Especially since the god of Atahualpa once said in a post that this was impossible. Oh boy, I want to celebrate!!

Edit: wanted to point out, that in my CSS code above, I reference "div#execphp-3.widget" a couple times. that was generated by Wordpress, I don't know if yours will be different. If it is, you can figure it out by looking at your Page Source and seeing the name that Wordpress gave to your PHP Code widget, then adjust the css code. Also wanted to point out in the PHP Code sample if you want more than 3 submenu items, that is fine, but be sure to change the <li> class appropriately so that the items highlight properly, <li class=\"cat-item cat-item-X

Last edited by blogmom; Oct 29, 2010 at 12:12 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Display child pages in a horizontal menu bar? edvandyke Page & Category Menu Bars 4 Sep 2, 2011 09:33 AM
Horizontal sub-menu display [instead of dropdown] sarah97302 Atahualpa 3 Wordpress theme 9 Oct 29, 2010 12:00 PM
[SOLVED] Submenu in sidebar IldiW Page & Category Menu Bars 2 Oct 22, 2010 01:40 AM
Active colour for submenu nymana Page & Category Menu Bars 0 Jul 28, 2009 03:00 PM
Submenu formatting interage Page & Category Menu Bars 0 Apr 24, 2009 10:48 AM


All times are GMT -6. The time now is 05:33 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.