Levan Design

One typical form of operation used in programs that you un on your computer is to have a menu bar across the top of the window with a series of drop down menus attached to it to select the function that you want to perform. This script allows you to add a menu bar to the top of the pages of your web site that your visitors can use to navigate your site.

Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly website. It’s a good solution to trim down long menu that is overwhelming the screen space, getting them to display in a more organize category-sub category pattern.

Following tutorial explains how to create a dropdown menu on the blog ... Let's start.

"Attention! before you edit your HTML code, please download your template previously"

Go to Layout > Edit html. Find the following code <div id='content-wrapper'> and replace with the following code



<div id='topMenu'>

<ul class='sf-menu'>

<li class='cat-item '><a href='#' title='#'>Link 1</a></li>

<li class='cat-item '><a href='#' title='

#

'>Link 2</a></li>

<li class='cat-item '><a href='#' title='

#

'>Link 3</a></li>



<li class='cat-item '><a href='#' title='

#

'>Link 4</a>

<ul class='children'>

<li class='cat-item '><a href='

#' title='#

'>4.1</a></li>

<li class='cat-item '><a href='

#' title='#

'>4.2</a></li>

<li class='cat-item '><a href='

#' title='#

'>4.3</a></li>

</ul>

</li>



<li class='cat-item '><a href='

#' title='#

'>Link 5</a>

<ul class='children'>

<li class='cat-item '><a href='

#' title='#

'>5.1</a></li>

<li class='cat-item '><a href='

#' title='#

'>5.2</a></li>

<li class='cat-item '><a href='

#' title='#

'>5.3</a></li>

<li class='cat-item '><a href='

#' title='#

'>5.4</a></li>

</ul>

</li>



<li class='cat-item '><a href='

#' title='#

'>Link 6</a></li>



</ul>



</div>

Explanation : # = Replace with your link
# = Replace with your Menu Title

Css Style : Copy and paste the following code after <head>



/* TOP MENU */



#topMenu {

position:absolute;

bottom:0;

left:0;

width:958px;

}



#topMenu ul.sf-menu {

margin-left:-1px;

}



#topMenu ul.sf-menu li {

float:left;

line-height:43px;

padding:0 12px;

}

#topMenu ul.sf-menu li a {

text-decoration:none;

text-transform:uppercase;

border:none;

}

#topMenu ul.sf-menu li a:hover {

color:#FFF;

}



#topMenu ul.sf-menu li li {

background:#00B0F5;

padding-right:15px;

padding-top:5px;

}



#topMenu ul.sf-menu li ul.children {

border-bottom:none;

}



#topMenu ul.sf-menu li ul.children li,#topMenu ul.sf-menu li.page_item ul li {

position:relative;

line-height:100%;

height:28px;

text-transform:none;

}

#topMenu ul.sf-menu li ul.children li a, #topMenu ul.sf-menu li.page_item ul li a {

text-decoration: none;

display:block;

padding-top:7px;

line-height:100%;

border:none;

text-transform:none;

}

#topMenu ul.sf-menu li ul.children li a:hover, #topMenu ul.sf-menu li.page_item ul li a:hover{

color:#fff;



}

#topMenu ul.sf-menu li ul.children li ul.children {

border: none;



}

#topMenu ul.sf-menu li ul.children li ul.children a {

text-decoration: none;

position:relative;

border:none;

}

#topMenu ul.sf-menu li ul.children, #topMenu ul.sf-menu li.page_item ul

{

margin:13px 0 0 0;



}

#topMenu ul.sf-menu li ul.children ul.children

{

margin:0 0 0 38px;

}



/* TOP MENU */



#topMenu {

border:1px solid #00B0F5;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsTqkMzt73bkZfM55itWjz1I_eg4rCEPPDzkrtYozXNwy3K0ChQiO4LgxUaDZ82ZFwT70flpcOM2-ZVmFOSE0-p85Qtr-t6AQVUyzlAMYdIugEUSZw1lyTKdvqHWTTaDhzSWNMXCYvuo/s1600/bk_menu_blue.jpg) 0 0 repeat-x;

}



#topMenu ul.sf-menu li {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPokwoGjHosS_52e4LiklcLbkFCkMCbThJh8ey6CMUOPUErUHWf8M78iBpmCP4zY5ys2xbjg4Y-e3YtHyWxyirMn_OH4MFvtchvB66A97FNbZdI8POex8JtVsLYdZki9oXfeDn_v-hO4w/s1600/topmenu_border_blue.jpg) 100% 1px no-repeat;

}



#topMenu ul.sf-menu li a {

color:#000;

}



#topMenu ul.sf-menu li li {

background:#00B0F5;

}



#topMenu ul.sf-menu li ul.children {

border-bottom: 1px solid #008DF5;



}



#topMenu ul.sf-menu li ul.children li,#topMenu ul.sf-menu li.page_item ul li {

border:1px solid #008DF5;

border-bottom:none;

}



#topMenu ul.sf-menu li ul.children li a, #topMenu ul.sf-menu li.page_item ul li a {

color:#000;

}



/* --*/

Explanation : Replace the Red text <background menu> with your link

To see the results of the html code above Click here

By : Levan Design

How to add a dropdown menu with CSS style to your blogger

1 Comment:

Blog Archive

Popular Posts

Recent Post

Followers