The HTML <menu> element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked. Flow content
Use any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.
HTML5 defines a <nav> an element that can be used to contain the primary navigation of a website, be it a list of links or a form element such as a search box. This is a good idea. Previously, we would have contained the navigation block inside something like <div id="navigation">. While this works fine for styling purposes, it is semantically anonymous. The element provides a consistent way to unambiguously define the primary navigation areas. This is good for both search engine optimization and for visually impaired users. A screen reader user can more easily find the navigation area if it is clearly signposted (this does depend on whether the screen reader supports the element, so it might be a way off yet).
The menu of a site is unlikely to stay the same for very long — sites tend to grow and change as functionality is added and the user base grows, so you should create menus with scope for menu items to be added and removed as the site progresses, and for menus to be translated into different languages (so links will change in length). Also, you may find yourself working on sites where the HTML for menus is created dynamically using server-side languages rather than with static HTML. However, this does not mean that knowing HTML will become obsolete; it will actually become more important, as this knowledge will still be needed to create HTML templates for the server-side script to populate.
Types of menus.
There are several types of menus you will be called upon to create in HTML as you work on different websites. Most of these can be created with lists, although sometimes interface restrictions force you to use something different (more on that later). The list-based menus you will be likely to create are as follows:- In-page navigation: For example, a table of contents for a single page, with links pointing to the different sections on the page.
- Site navigation: A navigation bar for your whole website (or a subsection of it), with links pointing to different pages on the same site.
- Content-contextual navigation: A list of links that point to pages closely related to the subject of the page you’re currently on, either on the same site or on different ones.
- Sitemaps: Large lists of links that point to all the different pages of a website, grouped into related sublists to make them easier to make sense of.
- Pagination: Links pointing to other pages that make up further sections or parts of a whole, along with the current page, for example, part 1, part 2, and part 3 of an article.
-----------------------------------------------------------------------------------------------------------------------------------------------
HTML CODE.
<html>
<head>
<title>using menu</title>
<link rel="stylesheet" href="usingmenu.css">
<link rel="stylesheet" href="css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="middle">
<div class="menu">
<li class="item" id="profile">
<a href="#profile" class="btn"><i class="fas fa-user"></i>profile</a>
<div class="smenu">
<a href="#">posts</a>
<a href="#">pictore</a>
</div>
</li>
<li class="item" id="messages">
<a href="#messages" class="btn"><i class="fas fa-envelope"></i>messages</a>
<div class="smenu">
<a href="#">new</a>
<a href="#">sent</a>
<a href="#">spam</a>
</div>
</li>
<li class="item" id="setting">
<a href="#setting" class="btn"><i class="fas fa-cog"></i>setting</a>
<div class="smenu">
<a href="#">password</a>
<a href="#">language</a>
</div>
</li>
<li class="item">
<a href="#" class="btn"><i class="fas fa-sign-out-alt"></i>logout</a>
</li>
</div>
</div>
</section>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------
CSS CODE.
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
font-family: 'Bebas Neue', cursive;
}
.middle {
position: absolute;
top: 40%;
left: 40%;
transfrom: translate(-50%, -50%);
}
.menu {
width: 300px;
border-radius: 8px;
overflow: hidden;
}
.item {
border-top: 2px solid #2980b9;
overflow: hidden;
}
.btn {
display: block;
padding: 16px 20px;
background: #3498db;
color: #fff;
position: relative;
}
.btn:before {
content: "";
position: absolute;
width: 14px;
height: 14px;
background: #3498db;
left: 20px;
bottom: -7px;
transform: rotate(45deg);
}
.btn i {
margin-right: 10px;
}
.smenu {
background: #333;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
}
.smenu a {
display: block;
padding: 16px 26px;
color: #fff;
font-size: 15px;
margin: 4px 0;
position: relative;
color: #1aaafd;
}
.smenu a:before {
content: "";
position: absolute;
width: 6px;
height: 100%;
background: #3498db;
transition: 0.3s;
opacity: 0;
top: 0;
left: 0;
}
.smenu a:hover:before {
opacity: 1;
}
.item:target .smenu {
max-height: 10em;
}
.fas {
color: #fb6645;
}
------------------------------------------------------------------------------------------------------------------------------
OUT-PUT.
-------------------------------------------------------------------------------------------------------------------------------
0 Comments