Bootstrap Templates Bundle

Sunday, September 22, 2013

How to convert HTML menu to wordpress Menu

When you need to convert HTML menu to wordpress menu, this tutorial will be very helpful for you.


At first I show you the code for sample HTML menu code:

<div id="nav">
<nav class="jquery-menu clearfix">
<ul class="menu">
<li class="current active"><a href="index.html">Home</a></li>
<li class="parent"><a href="menu.html">Menu</a>
<ul>
<li><a href="menu.html">Breakfast</a></li>
<li><a href="menu.html">Lunch</a></li>

<li><a href="menu.html">Dinner</a></li>
<li><a href="menu.html">Desserts</a></li>
<li><a href="menu.html">Drinks</a></li>
</ul>
</li>
<li><a href="typography.html" >Typography</a></li>
<li><a href="blog.html">Blog</a></li>

<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>

CSS code for above HTML code is :

#nav
{
padding: 0 5px;
height: 40px;
/*float: right;*/
position: absolute;
top: 0;
right: 20px;
font-family: Helvetica, arial, sans-serif;

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-border-bottom-left-radius: 4px;
-border-bottom-right-radius: 4px;
}

#nav ul
{
z-index: 20;
}

#nav li 
{
list-style: none;
float: left;
position: relative;
margin: 0;
padding: 5px 0 40px;
}

#nav a
{
float: left;
padding: 7px 15px 11px;
min-height: 12px; /* min-height will allow an item to occupy multiple lines */
line-height: 100%;
text-decoration: none;
font-size: 1.1em;
text-shadow: 0 1px 0 #fff;
font-style: normal;

color: #241506;
}

#nav li.parent > a
{
background: url(../images/nav.png) no-repeat 50% -58px;
}

#nav li.active
{
background: url(../images/nav.png) no-repeat 50% 41px;
}

/* Second level
------------------------------------------ */

#nav li ul
{
position: absolute;
top: 40px;
left: -5px;
display: none;
padding: 10px 0 5px !important; /* Important so the slide functions don't overwrite it */

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

#nav li li
{
margin: 0;
border: 0;
padding: 0 5px;
}

#nav li li a
{
width: 140px;
display: block;
float: none;
padding: 10px;
}

#nav li li.parent > a
{
background: url(../images/nav.png) no-repeat 100% -122px;
}

/* Third level
------------------------------------------ */

#nav ul ul ul
{
top: 0;
left: 100%;
padding: 5px !important;
margin: -5px 0 0 0px;

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Now, need to convert this HTML menu to wordpress menu:
Step-1:               At first copy paste the below code to your functions.php file

    if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
    array(
     'menu_1' => 'Menu 1',      
               
    )
    );
    }

Step-2:                  Now change the above red color code  <div id="nav">  by <div id="cssmenu">

Step-3:                 Change the blue color HTML code by

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

Step-4:                 As we change the <div id="nav">  by <div id="cssmenu">, so we need to change the all  css code       #nav by   #cssmenu


below sample changed: 

#cssmenu
{
padding: 0 5px;
height: 40px;
/*float: right;*/
position: absolute;
top: 0;
right: 20px;
font-family: Helvetica, arial, sans-serif;

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-border-bottom-left-radius: 4px;
-border-bottom-right-radius: 4px;
}

#cssmenu ul
{
z-index: 20;
}

#cssmenu li 
{
list-style: none;
float: left;
position: relative;
margin: 0;
padding: 5px 0 40px;
}

#cssmenu a
{
float: left;
padding: 7px 15px 11px;
min-height: 12px; /* min-height will allow an item to occupy multiple lines */
line-height: 100%;
text-decoration: none;
font-size: 1.1em;
text-shadow: 0 1px 0 #fff;
font-style: normal;

color: #241506;
}

#cssmenu li.parent > a
{
background: url(../images/nav.png) no-repeat 50% -58px;
}

#cssmenu li.active
{
background: url(../images/nav.png) no-repeat 50% 41px;
}

/* Second level
------------------------------------------ */

#cssmenu li ul
{
position: absolute;
top: 40px;
left: -5px;
display: none;
padding: 10px 0 5px !important; /* Important so the slide functions don't overwrite it */

background: url(../images/paper.jpg);
border: 1px solid #dcd7d2;
border-top: 0;

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomright: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

#cssmenu li li
{
margin: 0;
border: 0;
padding: 0 5px;
}

#cssmenu li li a
{
width: 140px;
display: block;
float: none;
padding: 10px;
}

#cssmenu li li.parent > a
{
background: url(../images/nav.png) no-repeat 100% -122px;
}

/* Third level
------------------------------------------ */

#cssmenu ul ul ul
{
top: 0;
left: 100%;
padding: 5px !important;
margin: -5px 0 0 0px;

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

}

1 comment:

Murphy - Home Maintenance & Repair Service HTML Template

Murphy is a handyman repair service Bootstrap HTML Template. It is ideal for either all-rounders or professional teams to introduce the...