How to create Right Aligned Menu Links using HTML and CSS ?
Last Updated :
21 Nov, 2019
Improve
The right-aligned menu links are used on many websites. Like hotels website that contains lots of options in the menu section but in case of emergency to make contact with them need specific attention. In that case, you can put all the menu options on the left side of the navigation bar and display contact us option on the right side of the bar. This design will make the website more attractive than the regular menu links. To create the right align menu links you just need HTML and CSS. Menu links should contain an important menu list that you want to display on the right side. The below example will illustrate the approach of the concept.
Creating the Structure: In this section, we will create a basic website structure to create a right-aligned menu links.
- HTML code to make the structure:
html <!DOCTYPE html> <html> <head> <title> How To Create Right Aligned Menu Links using HTML and CSS ? </title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- Navbar items --> <div id="navlist"> <a href="#">Home</a> <a href="#">Our Products</a> <a href="#">Careers</a> <div class="navlist-right"> <a href="#">About Us</a> <a href="#">Contact Us</a> </div> </div> <!-- logo with tag --> <div class="content"> <h1 style="color:green; padding-top:40px;"> GeeksforGeeks </h1> <b>A Computer Science Portal for Geeks</b> <p> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. </p> </div> </body> </html>
- CSS code of structure:
html <style> /* styling navlist */ #navlist { background-color: #0074D9; position: absolute; width: 100%; } /* styling navlist anchor element */ #navlist a { float:left; display: block; color: #f2f2f2; text-align: center; padding: 12px; text-decoration: none; font-size: 15px; } .navlist-right{ float:right; } /* hover effect of navlist anchor element */ #navlist a:hover { background-color: #ddd; color: black; } </style>
<!DOCTYPE html>
<html>
<head>
<title>
How To Create Right Aligned Menu
Links using HTML and CSS ?
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
/* styling navlist */
#navlist {
background-color: #0074D9;
position: absolute;
width: 100%;
}
/* styling navlist anchor element */
#navlist a {
float:left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
}
.navlist-right{
float:right;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Our Products</a>
<a href="#">Careers</a>
<div class="navlist-right">
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</div>
</div>
<!-- logo with tag -->
<div class="content">
<h1 style="color:green; padding-top:40px;">
GeeksforGeeks
</h1>
<b>A Computer Science Portal for Geeks</b>
<p>
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide
well written, well thought and well
explained solutions for selected questions.
</p>
</div>
</body>
</html>
