Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #15578

    Is it possible to have the nested subpages menu (like the sidebar navigation does) but in top of the page between the slideshow and content?

    #88067

    I’m thinking that the best way to do it will be creating a new horizontal sidebar on top of the page after the slide… But the question is: How can I create that new horizontal sidebar, then to put inside the child menu with subpages?

    #88068

    Hi Altandmeier,

    What you can do is create a new template with the nav_menu function listed then add some CSS to your custom.css or Quick CSS to style the menu to go horizontally. If you’re comfortable with editing PHP and CSS then here’s the basic steps.

    1) Find these lines in your functions-choices.php (located in your theme’s directory)

    //call functions for the theme
    add_filter('the_content_more_link', 'avia_remove_more_jump_link');
    add_post_type_support('page', 'excerpt');

    Directly underneath the last line add this:

    register_nav_menu( 'secondary', __( 'Horizontal Menu' ) );

    Save the file/close.

    2) Open page.php and save as page-menu.php

    3) In page-menu.php (or whatever you call it) add “Template Name: Page with Menu” to the second line so it looks like this:

    <?php
    Template Name: Page with Menu
    global $avia_config;

    4) Again in page-menu.php, find this line:

    <div class='template-page content <?php avia_layout_class( 'content' ); ?> units'>

    Underneath add this:

    <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>

    5) Go to Pages > Your Page and select the new page template under the Template dropdown

    6) Go to Appearance > Menus > Create new menu and select that menu under Secondary in the Theme Locations box

    7) Add this to your custom.css

    /*menu*/
    .secondary_menu{
    float: left;
    clear:both;
    position: relative;
    z-index: 100;
    padding:0;
    line-height:30px;
    height:15px;
    margin:9px 0;
    left:-15px;
    }

    .secondary_menu ul{
    margin:0;
    padding: 0;
    }

    .secondary_menu ul ul, .secondary_menu .pointer_arrow{
    border-style: solid;
    border-width: 1px;
    }

    .secondary_menu ul:first-child >li > ul{
    border-top:none;
    }

    .secondary_menu .pointer_arrow_wrap{
    display:none;
    }

    .secondary_menu ul:first-child > li{
    line-height: 30px;
    height: 30px;
    }

    .secondary_menu ul:first-child > li > a{
    display:block;
    text-decoration: none;
    padding:0 15px;
    text-transform: uppercase;
    font-weight: bold;
    border-left-style: solid;
    border-left-width: 1px;
    line-height: 1em;
    font-size:12px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    }

    #top .secondary_menu .menu li:first-child>a{
    border:none;
    }

    .secondary_menu ul:first-child > li.current-menu-item > a, .secondary_menu ul:first-child > li.current_page_item > a{
    font-weight: bold;
    }

    .secondary_menu .menu li a strong {
    display:block;
    font-size:14px;
    font-weight:normal;
    cursor: pointer;
    }

    #top .secondary_menu .menu li{
    float:left;
    position:relative;
    z-index:20;
    float:left;
    padding:0;
    margin:0;
    }

    #top .secondary_menu .menu ul li{
    padding:0 18px;
    }

    .secondary_menu .menu ul {
    display: none;
    margin-left:0;
    left:0;
    /*
    left:50%;
    margin-left:-104px;
    */

    position: absolute;
    top: 24px;
    width: 208px;
    z-index: 2;
    cursor: pointer;
    padding:4px 0;
    -moz-box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    }

    .secondary_menu .menu ul li a{
    border-top-style: solid;
    border-top-width: 1px;
    }

    #top .secondary_menu .menu li ul a{
    width:170px;
    height:auto;
    float:left;
    text-align:left;
    line-height:23px;
    padding:6px 0;
    font-size: 12px;
    min-height: 23px;
    max-width: none;
    text-decoration: none;
    }

    #top .secondary_menu ul ul{
    top:auto;
    padding-top: 0px !important;
    }

    #top .secondary_menu .menu li ul ul {
    left:192px;
    top:0px;
    margin:0;
    }

    #top .secondary_menu .menu li ul ul {}

    #top .secondary_menu .menu li:hover ul ul, #top .secondary_menu .menu li:hover ul ul ul,#top .secondary_menu .menu li:hover ul ul ul ul{
    display:none;
    }
    #top .secondary_menu .menu li:hover ul, #top .secondary_menu .menu li li:hover ul, #top .secondary_menu .menu li li li:hover ul, #top .secondary_menu .menu li li li li:hover ul{
    display:block;
    }

    Note the above CSS is a copy of the default main menu style so you’ll need to make adjustments.

    Hope this helps!

    Regards,

    Mya

    #88069

    Thanks Mya,

    I’m cool with php and css edition, not a programmer, but I understand syntaxis.

    I need to keep both current sidebar on the right, and put the new horizontal bar on the top. That code you explained to me keeps the sidebar on the right? Is it independent?

    Thanks for your support.

    #88070

    Mya, one last question… If I want that menu to be the nested pages in current page, what shoud I put in code? I mean, I don’t want to create a menu, I want to populate automatically the nested subpages in the current page as horizontal menu.

    Do you understand?

    #88071

    Instead of the menu, I need the nested pages there. For example:

    Services > Consulting

    Once you are in Consulting you have an horizontal top menu with the subnavigation which contains all the pages nested in services section.

    Do you understand what I mean? :-)

    Thanks

    #88072

    Hi Altandmeier,

    Okay, I see. To do a nested menu that automatically populates you’ll want to use this:

    <?php
    if($post->post_parent)
    $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
    else
    $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
    if ($children) { ?>
    <ul>
    <?php echo $children; ?>
    </ul>
    <?php } ?>

    So in the Step 4 from above instead of posting what I listed you’ll want to post the code in this thread. You can also the line from functions.php that I told you to add in Step 1. If you need more information or want more options for that code check out the WordPress codex.

    http://codex.wordpress.org/Function_Reference/wp_list_pages

    Hope this helps! Let us know if you have more questions.

    Regards,

    Mya

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Menu inside page’ is closed to new replies.