In this article, we are going to create a navigation bar with three different positions i.e left, right and Centre. To understand this article we need to understand some basic HTML and CSS.
Approach:
- Here we are going to make a navigation bar for EBook websites.
- The tags we are going to use for the Navigation bar is header, image, nav, button. Here we’re going to target each tag individually.
- Here we are going to try 3 different positions for the navigation bar i.e left, right, and Centre.
- After writing HTML, we will focus on CSS, or we will use a style tag on HTML to make the website Navbar attractive.
1. Left Aligned Navigation Bar: In the left-positioned navigation bar, all list of links is on the right side i.e. left aligned and the image is on the left side which is right-aligned.
Example: Here we are using the above-explained method.
<!DOCTYPE html> < html lang = "en" >
< head >
< style >
@import url(
/* First make all margin and padding 0 */
* {
margin: 0px;
padding: 0px;
background-color: rgb(19, 6, 6);
}
/* Second work on image*/
header img {
display: block;
height: 84px;
cursor: pointer;
margin-right: auto;
}
/* Changes the styling of links if necessary */
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 16px;
color: whitesmoke;
text-decoration: none;
}
/* Now start positioning the links and images
according to your convinence */
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
}
.navigate_links {
list-style: none;
}
.navigate_links li {
display: inline-block;
padding: 10px 20px;
}
.navigate_links li a {
transition: all 0.3s ease-in-out 0s;
}
/* Add some transition to make navigation
bar attractive */
.navigate_links li a:hover {
color: greenyellow;
border: 2px solid blue;
box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
border-radius: 8px;
margin: 10px;
padding: 12px;
}
button {
margin-left: 70px;
padding: 9px 12px;
border-radius: 15px;
background-color: rgb(89, 61, 248);
color: rgb(243, 236, 236);
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out 0s;
}
button:hover {
background-color: rgb(219, 221, 81);
color: black;
}
</ style >
</ head >
< body >
< header >
< img class = "logo"
src =
alt = "Loading image" >
< nav >
< ul class = "navigate_links" >
< li >< a href = "#" >Popular</ a ></ li >
< li >< a href = "#" >New</ a ></ li >
< li >< a href = "#" >Ebook</ a ></ li >
< li >< a href = "#" >Reading-List</ a ></ li >
< li >< a href = "#" >Topics</ a ></ li >
</ ul >
</ nav >
< a class = "signin" href = "#" >
< button >Get it for free</ button >
</ a >
</ header >
</ body >
</ html >
|
Output:
2. Centre-Aligned Navigation Bar: In the Centre-aligned navigation bar, all the links are at the Centre, the logo is right-aligned and the button is left-aligned all these things can be done only from one line of code.
Example: In this example, we are using the above-explained method.
<!DOCTYPE html> < html lang = "en" >
< head >
< style >
@import url(
* {
margin: 0px;
padding: 0px;
background-color: rgb(7, 6, 6);
}
header img {
display: block;
height: 84px;
cursor: pointer;
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 16px;
color: whitesmoke;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.navigate_links {
list-style: none;
}
.navigate_links li {
display: inline-block;
padding: 0px 20px;
}
.navigate_links li a {
transition: all 0.3s ease-in-out 0s;
}
button {
padding: 9px 12px;
border-radius: 15px;
background-color: rgb(89, 61, 248);
color: rgb(243, 236, 236);
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out 0s;
}
.navigate_links li a:hover {
color: greenyellow;
border: 2px solid blue;
box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
border-radius: 4px;
margin: 10px;
padding: 12px;
}
button:hover {
background-color: rgb(219, 221, 81);
color: black;
}
</ style >
</ head >
< body >
< header >
< img class = "logo"
src =
alt = "Loading image" >
< nav >
< ul class = "navigate_links" >
< li >< a href = "#" >Popular</ a ></ li >
< li >< a href = "#" >New</ a ></ li >
< li >< a href = "#" >Ebook</ a ></ li >
< li >< a href = "#" >Reading-List</ a ></ li >
< li >< a href = "#" >Topics</ a ></ li >
</ ul >
</ nav >
< a class = "signin" href = "#" >
< button >Get it for free</ button >
</ a >
</ header >
</ body >
</ html >
|
Output:
3. Right Aligned Navigation Bar: In the right-aligned navigation bar, the navigation links are rights aligned, and all other links like button and logo depend on the developer’s choice.
Example: Here is the example of above explained method.
<!DOCTYPE html> < html lang = "en" >
< head >
< style >
@import url(
* {
margin: 0px;
padding: 0px;
background-color: rgb(12, 9, 9);
}
header img {
display: block;
height: 84px;
cursor: pointer;
/* margin-right: auto; */
order: 3;
margin-left: auto;
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 16px;
color: whitesmoke;
text-decoration: none;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
order: 1;
}
.navigate_links {
list-style: none;
}
.navigate_links li {
display: inline-block;
padding: 0px 20px;
}
.navigate_links li a {
transition: all 0.3s ease-in-out 0s;
}
button {
margin-left: 20px;
padding: 9px 12px;
border-radius: 15px;
background-color: rgb(89, 61, 248);
color: rgb(243, 236, 236);
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out 0s;
}
.navigate_links li:nth-child(1) {
padding: 0px 20px 0px 0px;
}
.navigate_links li a:hover {
color: greenyellow;
border: 2px solid blue;
box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
border-radius: 4px;
margin: 10px;
padding: 12px;
}
button:hover {
background-color: rgb(219, 221, 81);
color: black;
}
</ style >
</ head >
< body >
< header >
< img class = "logo"
src =
alt = "Loading image" >
< nav >
< ul class = "navigate_links" >
< li >< a href = "#" >Popular</ a ></ li >
< li >< a href = "#" >New</ a ></ li >
< li >< a href = "#" >Ebook</ a ></ li >
< li >< a href = "#" >Reading-List</ a ></ li >
< li >< a href = "#" >Topics</ a ></ li >
</ ul >
</ nav >
< a class = "signin" href = "#" >
< button >Get it for free</ button >
</ a >
</ header >
</ body >
</ html >
|
Output: