Create A Drop Down Menu to the blogger
If we are working on a simple free blog or website creation with very few pages and only one programmer is working to create free blogs and a website in that case we can create static menu and use it in our website.
Let’s consider now we need to work for a big web application project let’s consider ERP Web application development. In that case more than 2 developers will be working and the no of pages might be more than 50 to 100.In this case it will be hard to maintain the Static menu And also there will be more chance to remove and add new menu item to our web project for example our client can ask as to add 5 more new menu or remove 1 menu item.
The Drop down menu is used get the good looking for the website and blogers and the easy way to search the data for people.it is very important for the all the websites.the drop down menu come with different styles provided by the our website.
the drop down menu shows a website with different labels and searching process is easy to find the data from the internet.
Step by Step is given below
Step1:
login to the your blogger
step2:
from the left side bar click on template and Edit HTML
step3:
CTRL+F and Search for the home page.
when your get the drop down menu insert
CSS code is given Below:
CSS code is given Below:
Simple Pure CSS Drop Down Menu
Step4:
save the template and Go to view blog
for Other drop down menus are download frle
And other Drop Down menus code is given below.They are
And other Drop Down menus code is given below.They are
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Html Code:
1)
class="menu-wrap">
- class="clearfix">
- class="sub-menu">
.png)
.png)
0 comments:
Post a Comment