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 5 points N/A #128832

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

qa-featured

 

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

http://cssmenumaker.com/

https://www.w3schools.com/css/css_navbar.asp

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>

About Toni Linscomb
Questions
0
Answers
197
Best Answers
86

GSM Interview Questions and Answers about VIVA

Previous

Need help with windows notes calendar sync.

Next

Related Questions