Create dropdown menu without plugins to WordPress site

A dropdown menu has the particularity to display the sub-items when you hover over the parent item . They are widely exploited to better divide and organize the navigation information from a site , and bring a good visual appeal to the visitor. The menu interactivity factor is also another plus point , as to hide items causes netizen ‘s curiosity to discover the hidden content .




Create dropdown menu without plugins to WordPress
ADD SUPPORT MENUS
If the theme you are using does not support menus , open the functions.php file and add the following statements :
1
register_nav_menu ( ‘ main- menu ‘, ‘ Main Menu ‘);
In this step we recorded the menu with main- menu identifier and name Main Menu using the parameters passed . The following will choose the theme of the place you want to display this menu. Usually menus are located at the top of the page if you want that way too , open the header.php file and enter which best suit the menu to the template:
1
two
3
< Div id = “menu “>
    < ? Php wp_nav_menu ( array ( ‘ location’ => ‘ main- menu ‘ , ‘container ‘ => ‘ div ‘, ‘ container- class’ =>’ menu ‘,’ menu_class ‘ => ‘ ul- menu ) ) ; ? >
< / Div >
In function wp_nav_menu identified the menu created to be displayed in that space and container parameters are the menu is surrounded by a div (HTML tag ) with the ‘menu’ class, while the class of unordered list menu was defined to differentiate the div class .
DISPLAYING MENUS
After entering the code in the theme file , open it and see the returned values and the menu generated by the function. If you followed the steps and does not have menus created in WordPress the result will be the list of pages , so why the wp_nav_menu function performs by default wp_page_menu function if no menu is found.
That’s the reason we put the menu in the menu div with class , as also by default , the alternate function generates a div instantiated with the class of the same name . Thus the menu is displayed in the same independently have been created or not and will have to dial like this :
<div id=”menu”>
    <div class=”menu”>
        <ul>
            <li id=”item-1″ class=”page_item page-item-1″>
                <a href=”http://localhost/wordpress/?page_id=1″ title=”Item 1″>Item 1</a>
            </li>
            <li id=”item-2″ class=”page_item page-item-2″>
                <a href=”http://localhost/wordpress/?page_id=2″ title=”Item 2″>Item 2</a>
            </li>
            <li id=”item-3″ class=”page_item page-item-3″>
                <a href=”http://localhost/wordpress/?page_id=3″ title=”Item 3″>Item 3</a>
            </li>
            <li id=”item-4″ class=”page_item page-item-4″>
                <a href=”http://localhost/wordpress/?page_id=4″ title=”Item 4″>Item 4</a>
                <ul class=’children’>
                    <li id=”item-5″ class=”page_item page-item-5″>
                        <a href=”http://localhost/wordpress/?page_id=5″ title=”Item 5″>Item 5</a>
                    </li>
                    <li id=”item-6″ class=”page_item page-item-6″>
                        <a href=”http://localhost/wordpress/?page_id=6″ title=”Item 6″>Item 6</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
MANAGING MENUS FOR WORDPRESS
Open your admin panel and click Appearance, and then the item menus located on the side menu. In this menu editing screen add items auxiliary boxes and drag them as it sees fit in order to compose the best menu that fits your site. Place particular item beneath another and drag it forward to set it as a child of above item located.
In the case of alternative listing pages for the case there is no set menu, you can set a page as another daughter on the page editing screen. Locate the Page Attributes box, usually to the right of the text edit box and select another page in any field Mother.
Style your MENU WITH CSS
We will now format the way the menu is displayed within the template. For this include in your file style.css the following lines:
1
two
3
4
5
#menu {float: left; width: 100%; height: 50px; }
# menu li {float: left; padding: 10px 20px; }
# menu ul li {display: none; position: absolute; }
# menu li ul li {display: block; float: none; padding: 5px 10px; }
In addition to these markings you can explore the visual so that it has a better presentation to your visitor, past information are the basis for the operation of dropdown effect. Note that obey the structure both to the functions defined and practical way that:
    width: 100% – The menu occupies the whole screen;
    float: left – Primary items displayed side by side;
    display: none – The sub-items are not displayed initially;
    display: block; float: none – The sub-items when shown will be one below the other;
INTERACTION WITH JAVASCRIPT
We will use the jQuery library to display and make hide the sub-items according to user interaction. Enter the following javascript code to your header.php page within the meta tag:
<? Php wp_enqueue_script ( ‘ jquery ‘ ); ? >
<Script type = “text / javascript” >
jQuery ( document) .ready (function ( $ )
{
    $ ( “# Menu ul li ‘ ) . Each ( function () {
        var el = $ ( ‘# ‘ + $ (this) .attr ( ‘id’ ) + ‘ ul : eq ( 0 )’);
        $ (This) .hover (function ( ) {
            n_left var = $ (this) .position ( ) left . ;
            n_top var = $ (this) .position ( ) + top 50 . ;




            n_width var = $ (this) .width () + 40;
            el.css ( ‘left’ , n_left ) ;
            el.css ( ‘top’ , n_top ) ;
            el.css ( ‘width’ , n_width ) ;
            el.show ();
        } , Function () {
            el.hide ();
        });
    });
});
< / Script >
The value 50 with respect to time of the menu, while 40 is the value of the padding ( inset ) that created it. In a nutshell this code will :
    Toggle the display of sub-items ;
    Position the submenu below the item you are with the mouse stopped ;
    Match the width of the submenu to the item to which it belongs .
EXPLORING THE SUB- LEVELS MENU
By applying the programming found a small problem: It works well only for the first menu level. To display the sub-items under the selected item , when we go beyond the first level items overlap each other . The alternative to this case is to create a variation that takes the submenu forward the current item :
<?php wp_enqueue_script( ‘jquery’ ); ?>
<script type=”text/javascript”>
var level = 0;
jQuery(document).ready(function($)
{
    $(“#menu ul li”).each(function()
    {
        var el = $(‘#’ + $(this).attr(‘id’) + ‘ ul:eq(0)’); 
        $(this).hover(function()
        {
            var n_left = $(this).position().left;
            var n_top = $(this).position().top + 50;
            var n_width = $(this).width() + 40;
            if ( level > 0 ) {
                n_top -= 50;
                n_left += n_width;
            }
            el.css(‘left’, n_left);
            el.css(‘top’, n_top);
            el.css(‘width’, n_width);
            el.show();
            level++;
        }, function(){
            el.hide();
            level–;
        });
    });
});
</script>




LEAVE A REPLY

Please enter your comment!
Please enter your name here