Dheeraj Yadav
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative CSS Navigation Indicator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navigation">
<ul>
<li class="list active" data-color="#f53b57">
<a href="#">
<span class="icon"><i class="fa-solid fa-house"></i></span>
<span class="title">Home</span>
</a>
</li>
<li class="list" data-color="#3c40c6">
<a href="#">
<span class="icon"><i class="fa-solid fa-user"></i></span>
<span class="title">Profile</span>
</a>
</li>
<li class="list" data-color="#05c46b">
<a href="#">
<span class="icon"><i class="fa-solid fa-message"></i></span>
<span class="title">Message</span>
</a>
</li>
<li class="list" data-color="#0fbcf9">
<a href="#">
<span class="icon"><i class="fa-solid fa-circle-question"></i></span>
<span class="title">Help</span>
</a>
</li>
<li class="list" data-color="#ffa801">
<a href="#">
<span class="icon"><i class="fa-solid fa-gear"></i></span>
<span class="title">Settings</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>
<!-- add active class on hovered item -->
<script>
let list = document.querySelectorAll('li');
for (let i=0; i<list.length; i++){
list[i].onmouseover = function(){
let j = 0;
while (j < list.length){
list[j++].className = 'list';
}
list[i].className = 'list active';
}
}
// change body color according to indicator
list.forEach(elements => {
elements.addEventListener('mouseenter',function(event){
let bg = document.querySelector('body');
let color = event.target.getAttribute('data-color');
bg.style.backgroundColor = color;
})
})
</script>
</body>
</html>
This code is an HTML document that creates a navigation bar with icons and titles with an indicator below the active item. The navigation bar is created using an unordered list and each list item has a link to a designated page.
The meta tag in the head section sets the viewport size and scale of the webpage. The title tag sets the title of the document.
The code imports Font Awesome 6.1.1 CSS library and another stylesheet called style.css.
In the body section there is a div with class “navigation” that contains a ul (unordered list). Inside the ul, li (list) elements are used to create the navigation items. Each list item contains an anchor tag with a span element for icon and title text. Each list item also has a data-color attribute that sets the background color of the webpage when hovering over it.
There is also a “indicator” div at the end of the unordered list which adds a visual cue to show which navigation item is currently active.
The script section adds functionality to change the active item upon mouseover. It first selects all list items using querySelectorAll() and loops through them with a for loop. When a list item is hovered over it adds the “active” class to that specific list item and removes it from the others. Additionally the background color of the webpage changes to the corresponding color associated with that list item by getting the data-color attribute of the hovered list item and setting the background color of the body element.
Overall, this code creates a responsive navigation bar with hover effects and background color changes.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f53b57;
transition: 0.5s;
}
.navigation
{
position: relative;
width: 70px;
height: 350px;
background: #fff;
border-radius: 35px;
box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}
.navigation ul
{
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.navigation ul li
{
position: relative;
list-style: none;
width: 70px;
height: 70px;
z-index: 1;
}
.navigation ul li a
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
color: #333;
font-weight: 500;
}
.navigation ul li a .icon
{
position: relative;
display: block;
line-height: 75px;
text-align: center;
transition: 0.5s;
}
.navigation ul li.active a .icon
{
color: #fff;
}
.navigation ul li a .icon i
{
font-size: 24px;
}
.navigation ul li a .title
{
position: absolute;
top: 50%;
left: 110px;
background: #fff;
transform: translateY(-50%);
padding: 5px 10px;
border-radius: 6px;
transition: 0.5s;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
opacity: 0;
visibility: hidden;
}
.navigation ul li:hover a .title
{
opacity: 1;
visibility: visible;
transform: translateX(-25px) translateY(-50%);
}
.navigation ul li a .title::before
{
content: '';
position: absolute;
width: 12px;
height: 12px;
background: #fff;
left: -8px;
top: 46%;
transition: 0.5s;
transform: rotate(45deg) translateY(-50%);
border-radius: 2px;
}
.navigation ul .indicator
{
position: absolute;
left: 0;
width: 70px;
height: 70px;
transition: 0.5s;
}
.navigation ul .indicator::before
{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
background: #333;
border-radius: 50%;
transition: 0.5s;
}
.navigation ul li:nth-child(1).active ~ .indicator
{
transform: translateY(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator
{
transform: translateY(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator
{
transform: translateY(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator
{
transform: translateY(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator
{
transform: translateY(calc(70px * 4));
}
.navigation ul li:nth-child(1).active ~ .indicator::before
{
background: #f53b57;
}
.navigation ul li:nth-child(2).active ~ .indicator::before
{
background: #3c40c6;
}
.navigation ul li:nth-child(3).active ~ .indicator::before
{
background: #05c46b;
}
.navigation ul li:nth-child(4).active ~ .indicator::before
{
background: #0fbcf9;
}
.navigation ul li:nth-child(5).active ~ .indicator::before
{
background: #ffa801;
}This code is written in CSS and it defines the styling for a creative CSS Navigation Indicator. Here’s what each section of the code does:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');imports the Poppins font from Google Fonts.- The first block of code sets all margins, padding and border-box sizing to 0, and uses Poppins font as the default font for the entire page.
- The
bodysection sets the display to flex, so that the navigation list can be centered horizontally and vertically on the page, and sets a minimum height of 100vh (viewport height) so that the background color can transition smoothly. - The
.navigationsection styles the container div that holds the navigation list. It has a fixed width and height, a white background, rounded corners, and a slight shadow to give it depth. - The
.navigation ulsection sets the position to absolute and top/left position to 0 so that the unordered list items are positioned at the top left corner of the .navigation div. It also sets the display to flex and the flex direction to column, so that the list items stack vertically rather than horizontally. - The
.navigation ul lisection sets the list-style to none, which hides the bullet points that usually appear before each list item. It also sets the width and height to 70px and z-index to 1, which gives each list item a fixed size, and higher stacking order than the .indicator div. - The
.navigation ul li asection styles the anchor tag inside each list item, making it full-width, centered both horizontally and vertically, with a font weight of 500 and text color of #333. - The
.navigation ul li a .iconsection positions the icon span inside the anchor tag at the center of the list item, and adds a line-height value to vertically center the icon within its container. It also sets the color to change to white when its parent list item is active. - The
.navigation ul li.active a .iconsection changes the color of the icon to white when its parent list item is active. - The
.navigation ul li a .icon isection styles the icon element itself, setting its font size to 24px. - The
.navigation ul li a .titlesection styles the title span inside the anchor tag. It’s positioned absolutely to the right of the icon, and initially hidden with 0 opacity and visibility. When hovered over, its opacity and visibility become visible, and it moves to the left by -25px along the x-axis and remains centered along the y-axis using transform. - The
.navigation ul li a .title::beforesection creates a small triangular indicator before the title span, pointing towards the icon. It’s positioned absolutely, rotated 45 degrees along the z-axis, and styled with a background of white. - The
.navigation ul .indicatorsection styles the container div of the indicator, positioning it absolutely and aligning it to the left of the list item container. It has the same dimensions as the list items, but starts off transparent. - The
.navigation ul .indicator::beforesection creates the circle that appears on the left side of the list item. It’s positioned in the center of the .indicator div, has a fixed width and height, and starts off white. - The
.navigation ul li:nth-child(n).active ~ .indicatorsection positions the .indicator div below the active list item based on its order in the list. For example, if the third list item is active, then the .indicator div will be positioned vertically to match the third item’s position. - The
.navigation ul li:nth-child(n).active ~ .indicator::beforesection sets the background color of the circle to match the data-color attribute of the active list item. For example, if the fifth list item is active and has a data-color attribute of #ffa801, then the background color of the circle will change to #ffa801.
