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.
Adding a web page html menu bar code to a website.
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>
