Make a Drop Down Menu With CSS

Please drop your computer mouse to the menu and you will see the effect :

• 
  

  HOME



• 
  

  LINKS

  CSS Play

  blog kang rohman

  unique template

  rubrik elektronik

  css library



• 
  

  LAYOUTS

  Fixed 1

  Fixed 2

  Fixed 3

  Fixed 4

  minimum width for Internet Explorer

This drop down menu is 100% using CSS, without javascript or other script. So that this drop down menu don't make your blog become slow down when in loading, faster loading and matc with much browser, i advice to you to using this dropdown menu at your blog.

How to make this drop down menu? there is ofcourse many way to do this, but i will show you 2 way to make this drop down menu :

# First way :

Step #1 :

1. Login to blogger with your ID
2. After entering the dasboard page , click Layout. Please saw the picture :

3. Then click edit HTML tab. Please saw the picture :

4. I suggest to you, beforehand to back up your template. Click the Download full template link. Please saw the picture :

5. After you click Download full template link, then will emerge new window just to download. Click the Save button. Saw the picture :

6. You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button. Please saw the picture :

7. Go to your template code and find this code : ]]></b:skin>
8. Copy and paste following codes above of ]]></b:skin>
   
   
   
   /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_definition2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:5px; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;} #menu .one {background: #827b6b; border-top:5px solid #dca;} #menu .two {background: #646e4c; border-top:5px solid #bb9;} #menu .three {background: #a4a88d; border-top:5px solid #eec;} #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;} #menu .one dt {background: #b2ab9b;} #menu .two dt {background: #949e7c;} #menu .three dt {background: #d4d8bd;} #menu .four dt {background: #e2dfa8;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #aaa;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #eee;} #menu .four dd {border-bottom:1px solid #999;} #menu dd.last {border-bottom:1px solid #fff;} #menu dt a, #menu dt a:visited {display:block; color:#444;} #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;} #menu .one dd a {background:#949e7c; color:#eee;} #menu .two dd a {background:#d4d8bd; color:#346;} #menu .three dd a {background:#e2dfa8; color:#654;} #menu .four dd a {background:#b2ab9b; color:#ff8;} #menu .one dd a:hover {background: #b2ab9b; color:#345;} #menu .two dd a:hover {background: #949e7c; color:#543;} #menu .three dd a:hover {background: #d4d8bd; color:#123;} #menu .four dd a:hover {background: #e2dfa8; color:#534;}
   
   
9. Go to underside, the code searching looking like this :
   
   
   
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>
   
   
10. Change the code printing with green colour, so that his code become be like this :
    
    
    
    <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>
    
    
    
11. Click     . Await a few moments do shall your template have in saving.

Step #2

1. Click at Page Elements tab. See the picture below :

2. Click at Add a Page element which located above of the header element. See the picture following :

3. After emerging pop up window , Click add to blog button for the things HTML/JavaScript. See the picture following :

4. Copy and paste the code below into available column ( don't forget to change the links with link property of your own) :
<ul id="menu"><!-- drop down menu start --> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --> <dt><a href="../menu/index.html">DEMOS</a></dt> <dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd> <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd> <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd> <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd> <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd> <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd> <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd> <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd> <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="two"> <dt><a href="index.html">MENUS</a></dt> <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd> <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd> <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd> <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd> <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd> <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd> <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="three"> <dt><a href="../layouts/index.html">LAYOUTS</a></dt> <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd> <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd> <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd> <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd> <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="four"> <dt><a href="../mozilla/index.html">MOZILLA</a></dt> <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd> <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd> <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd> <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd> <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd> <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd> <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul><!-- end of drop down menu -->

5. Click      
6. Done. Please see the result.

Note : for several template, this way is not good looking. So please find the other way.


Second way

Design of templates is very much and different, however I will take the example at minima template (original blogger template). Here is the steps :

1. Login to blogger with your ID
2. After entering the dasboard page , click Layout. Please saw the picture :
   
   
3. Then click edit HTML tab. Please saw the picture :
   
   
4. I suggest to you, beforehand to back up your template. Click the Download full template link. Please saw the picture :
   
   
5. After you click Download full template link, then will emerge new window just to download. Click the Save button. Saw the picture :
6. Please mark the little box beside Expand Widget Templates. Wait for a moment.

7. Go to your template code and find this code : ]]></b:skin>
8. Copy and paste following codes above of ]]></b:skin>
/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_definition2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:5px; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;} #menu .one {background: #827b6b; border-top:5px solid #dca;} #menu .two {background: #646e4c; border-top:5px solid #bb9;} #menu .three {background: #a4a88d; border-top:5px solid #eec;} #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;} #menu .one dt {background: #b2ab9b;} #menu .two dt {background: #949e7c;} #menu .three dt {background: #d4d8bd;} #menu .four dt {background: #e2dfa8;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #aaa;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #eee;} #menu .four dd {border-bottom:1px solid #999;} #menu dd.last {border-bottom:1px solid #fff;} #menu dt a, #menu dt a:visited {display:block; color:#444;} #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;} #menu .one dd a {background:#949e7c; color:#eee;} #menu .two dd a {background:#d4d8bd; color:#346;} #menu .three dd a {background:#e2dfa8; color:#654;} #menu .four dd a {background:#b2ab9b; color:#ff8;} #menu .one dd a:hover {background: #b2ab9b; color:#345;} #menu .two dd a:hover {background: #949e7c; color:#543;} #menu .three dd a:hover {background: #d4d8bd; color:#123;} #menu .four dd a:hover {background: #e2dfa8; color:#534;}
9. Go to underside, find this codes :

<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section>

10. Delete the above code and change with following code.
<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section> <ul id="menu"><!-- drop menu start --> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --> <dt><a href="../menu/index.html">DEMOS</a></dt> <dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd> <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd> <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd> <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd> <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd> <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd> <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd> <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd> <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="two"> <dt><a href="index.html">MENUS</a></dt> <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd> <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd> <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd> <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd> <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd> <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd> <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="three"> <dt><a href="../layouts/index.html">LAYOUTS</a></dt> <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd> <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd> <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd> <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd> <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="four"> <dt><a href="../mozilla/index.html">MOZILLA</a></dt> <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd> <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd> <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd> <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd> <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd> <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd> <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul><!-- end of drop down menu -->
11. Click      
12. Done. Please see the result.

A little clue :

At the above code, you will meet code like this :


This step is just for minima template, so with your blog template sometime same and sometime different.


<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>


Attention to the code <dt> and <dd>
The code begin with <dt>, there is the title of main menu.
The code begin with <dd>, there is the title of sub menu (drop menu).

You must alter the link with your own link, for example :
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page"> zero dollars</a></dd>
I alter it become :
<dd><a href="http://template-unik.blogspot.com/2007/11/unique-template-r-21.html" title="free template R 1.2">UniQue Template R 1.2</a></dd>


Note :

This code is copyright of CSS play, so if you using this drop down menu at your blog please add a link back to CSSplay and retain any copyright comment in the stylesheet.

You can get the original code of this drop down menu at CSS play.

See you at my next post. Don't miss it brother.