SOFTWARE TECHNICAL

Loading

How to create horizontal navigation bar using css script (drop down menu version)

One of the horizontal navigation menus are created using css and html scripts that can be put on the blog is a horizontal navigation menu / dropdown menu. As the picture below:



In this tutorial we will build the navigation bar from a standard HTML and css script list.

A navigation bar is basically a list of links, so using the
    and
  • elements tag :

    There are two steps to making the navigation menu


    1. Step 1 (Insert css menu on template blogspot)



    Css script
    menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Arial", Arial;
    font-size:14px;
    font-weight:bold;

    }
    .menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    font-size:14px;
    font-weight:bold;
    }
    .menu li{
    float:left;
    padding:0px;
    }
    .menu li a{
    background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
    }
    .menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
    .menu li:hover ul{
    display:block;

    }
    .menu li li {
    background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
    .menu li:hover li a{
    background:none;

    }
    .menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
    .menu p{
    clear:left;
    }

    Login on blogspot, Select Design - Edit HTML
    Activate Expand Widget Templates
    Find tag ]]>
    insert css script on above of    ]]>




    2. Step 2 (Put html script on gadget html/javascript blogger)
    On gadget html/javascript, insert html code below

    html script


    See picture
    On page Element, in header area, click add a gadget , select html/javascript widget, insert html code above in textbox   html/javascript widget




    Instruction: Change carachter # with your url blog or page url
    Example:
     
  • Home


    • or
  • Windows Tricks

Categories:

Leave a Reply