Adding a web page html menu bar code to a website.

Asked By 20 points N/A Posted on -
qa-featured

How can I add a web page html menu bar code to some website which is still under development? I have some idea about it but I need more clear steps.

SHARE
Answered By 0 points N/A #128832

Adding a web page html menu bar code to a website.

qa-featured

 

To achieve this you need bit of a HTML and CSS knowledge. You can see some sample menus in below links. What you need to do is copy the CSS codes and simple paste them on your HTML page with correct positions and dimensions.

http://cssmenumaker.com/

http://www.cssmenus.co.uk/

Below is a simple demonstration about adding the menu into the HTML page

<html>

<head>

ul {

    margin-left: 0;

       font: bold 12px Verdana, sans-serif;

       width: 237px;

       padding-top: 0;

       background-color: #FFFFFF;

}

ul li a {

display: block;

       padding: 5px;

       text-decoration: none;

       border-left-width: 1em;

       border-left-style: solid;

       background-color: #CCCCCC;

       border-left-color: #333333;

       color: #333333;

}

ul li a:hover {

background: #3b3b3b;

}

ul li {

list-style: none;

margin: 0;

border-top: 1px solid gray;

text-align: left;

}

li ul {

    display: none;

}

 

li:hover ul {

    display: block;

    position: absolute;

}

li:hover li {

border-color: #94ca4a;

       color: #FFF;

       background-color: #333333;

}

li:hover a { background: #3b3b3b; }

li:hover li a:hover {

display: block;

       padding: 5px;

       text-decoration: none;

       border-left-width: 1em;

       border-left-style: solid;

       background-color: #CCCCCC;

       border-left-color: #333333;

       color: #333333;

}

</head>

<body>

<ul id="menu">

    <li><a href="#">Home</a></li>

    <li><a href="#">Products</a>

        <ul>

            <li><a href="#">Item1</a></li>

            <li><a href="#"> Item2</a></li>

            <li><a href="#"> Item3</a></li>

        </ul>

    </li>

</ul>

</body>

</html>

Create the menu in the body of your HTML page. Now you need to add the styles to the menu. Add the CSS code within the <head> tags of the HTML page. You can also write the style in a different file and link it to the HTML page like below.

<head>

<linkrel="stylesheet" type="text/css" href="css/file.css" />

</head>

Login/Register to Answer

Related Questions