Hello Friends My Name Is Viraj,Today I Will Create Menu Bar On Your Web Page.For any web developer, it is almost mandatory to know how to create horizontal or vertical menu bar using HTML and CSS. Menu bar helps to categorize contents and increases the website readability. In this article, we will discuss how to create horizontal menu bar using HTML/CSS step by step and in the next article, how to create vertical menu bar using HTML/CSS. This is the simplest way to create css dropdown menu bar but best for new web developer. To get more interactive menu bar, you could use JQuery, HTML 5 and CSS3. To write the script, you could use any html css editor software but don’t forget to save the file with .HTML extension. Here I have used Notepad++ to write the script.This article will cover the creating of a CSS menu using the HTML Div tags. It will demonstrate the functionality by giving some examples on to play with different types of menus.This tutorial will deal with menu designing in CSS. You know that one of the most important parts of website is navigation menu, which is very decorative and interactive section of page. At the end of this tutorial you will be able to create interactive navigation menu.We will start menu designing by creating a container using a div box. My div box will contain id of navigation. A navigation menu always requires Standard HTML as a basic tool for menu designing. In following script we will use a div tag, <ul> and <li> tags and create menu options.Following section contains the description of linear menu (horizontal menu). Where the “li” elements will be displayed as inline elements, this forces the list to be in one line. The “ul” element has a full width and each hyperlink in the list has a width of 7px. Also we have added some colors to make it interactive.Following listed script will display simple vertical menu with sub menu, which compile the basic idea of menu designing.This section will explain the drop down menu or submenu in horizontal Menu. In modern interactive web designing, drop down menus appear very frequently. After entry of CSS higher version, it became possible to create similar effects using standard HTML technologies, a significant number of people who have difficulty with hand control or eye blindness can use a keyboard or other text device for accessing drop down menu. Listed script will compile the idea of dropdown menu in horizontal way.Today we’re going to look at how to make a HTML and CSS dropdown menu. No JavaScript or jQuery required!
Take a look at the demo to test it out and see what the end result looks like. The below HTML and CSS dropdown menu relies on z-index for some of the functionality, which can sometimes trip up beginners. If you get stuck, don’t hesitate to ask me a question.Navigation menus occupy a prominent visual space on most websites. As a result, nav elements tend to attract some of the most creative CSS and JavaScript techniques to achieve smooth transitions and beautiful transformations. However, good navigation is about a lot more than creating beautiful visual elements. Website navigation menus affect how search engines rank the pages of your website and how visitors move from one page of your site to another. A lot hinges on getting your website navigation right.Here In This Html Tutorial We Will Create Menu Bar In Html/Css Code.Here In This Blog We Will Create Menu Bar In Html/Css Code.
Here Is An Example Related To Topic...
Step 1:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Take a look at the demo to test it out and see what the end result looks like. The below HTML and CSS dropdown menu relies on z-index for some of the functionality, which can sometimes trip up beginners. If you get stuck, don’t hesitate to ask me a question.Navigation menus occupy a prominent visual space on most websites. As a result, nav elements tend to attract some of the most creative CSS and JavaScript techniques to achieve smooth transitions and beautiful transformations. However, good navigation is about a lot more than creating beautiful visual elements. Website navigation menus affect how search engines rank the pages of your website and how visitors move from one page of your site to another. A lot hinges on getting your website navigation right.Here In This Html Tutorial We Will Create Menu Bar In Html/Css Code.Here In This Blog We Will Create Menu Bar In Html/Css Code.
Here Is An Example Related To Topic...
Step 1:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Output :
No comments:
Post a Comment