In this tutorial, we'll create a stunning Majic Navigation Menu Indicator with Html CSS. This navigation menu features interactive hover effects that make the icons and text glow and change colors dynamically, providing a visually appealing user experience.
The menu utilizes modern design techniques, including flexbox layout, transitions, and pseudo-elements, to achieve the glowing effect. We'll also integrate icons from the Ionicons library to enhance the menu's visual appeal.
Let's dive into the code and explore how to create this eye-catching navigation menu step by step!
Firstly we will create index.html and style.css files to start our project code.
Html Code Explanations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Navigation Menu On Hover</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Sure! Let's break down the HTML code for the glowing navigation menu in detail:
The HTML document begins with the standard document type declaration DOCTYPE html, indicating that the document conforms to HTML5 standards.
Inside the head section, we have several important meta tags and a title. Moving to the body section, we have the structure of the navigation menu.
<!-- Navigation Menu Wrapper -->
<div class="wrapper">
<ul>
<!-- Navigation Menu Items -->
<li>
<div class="light-button">
<!-- Button Element -->
<button class="bt">
<!-- Light Holder for Glow Effect -->
<div class="light-holder">
<div class="dot"></div> <!-- Dot for decoration (not used in current CSS) -->
<div class="light"></div> <!-- Light effect overlay -->
</div>
<!-- Button Content Holder -->
<div class="button-holder">
<a href="">
<ion-icon name="home-outline"></ion-icon> <!-- Home icon -->
</a>
<p>Home</p> <!-- Text label -->
</div>
</button>
</div>
</li>
<!-- Repeat similar structure for other menu items -->
</ul>
</div>
<!-- Ionicons Library (for icons) -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>.wrapper serves as the main container for the navigation menu. It provides a centralized element for organizing and styling the menu items. ul represents an unordered list of menu items. li represents each individual menu item within the list.
Inside each li, there is a .light-button, which contains a .bt element for the menu item button.
Within the button, there is a .light-holder element responsible for the glowing effect. It includes two child elements: .dot (decorative element, not used in current CSS) and .light (overlay for the glowing effect).
Next, there's a .button-holder element containing an a tag wrapping an ion-icon element and a p tag for the text label associated with the menu item.
The ion-icon tag utilizes icons from the Ionicons library https://ionicons.com/ to visually represent each menu item. The name attribute specifies the icon to be displayed (e.g., home-outline for a home icon).
Lastly, the HTML document includes two script tags that import the Ionicons library from a CDN. These scripts enable the usage of Ionicons within the HTML document, allowing icons to be displayed and styled as part of the navigation menu.
CSS Code Explanation
/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* Global Reset */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}This line imports the Google Font "Poppins" with different weights (400, 500, 600) for use throughout the document. Importing a custom font enhances typography and allows for consistent text styling across elements.
padding: 0; margin: 0;: Resets default padding and margin of all elements to zero, ensuring a consistent starting point for layout. box-sizing: border-box;: Ensures that padding and border are included in the element's total width and height calculation. font-family: 'Poppins', sans-serif;: Sets the default font family to 'Poppins' with a fallback to a generic sans-serif font for elements within the document.
/* Body Styling */
html, body {
display: grid;
height: 100%;
place-items: center;
background: #1e1d1d; /* Dark background color */
}
/* Navigation Menu Wrapper */
.wrapper {
position: relative;
height: 120px;
width: 620px;
}display: grid;: Configures the body (and HTML root) as a grid container, enabling easy centering of content both horizontally and vertically. height: 100%;: Sets the height of the body to 100% of the viewport height, ensuring that content fills the entire screen. place-items: center;: Utilizes the place-items shorthand to center content within the grid container both horizontally and vertically.
background: #1e1d1d;: Sets the background color of the entire page to a dark shade, providing a visually appealing backdrop. position: relative;: Establishes the navigation menu wrapper .wrapper as a positioned element, allowing child elements to be positioned relative to it.
height: 120px; width: 620px;: Sets the dimensions (height and width) of the navigation menu wrapper to a fixed size, ensuring a specific layout on the page.
/* Navigation Menu Items */
.wrapper ul {
display: flex;
justify-content: space-between;
transform: translateY(-100px); /* Adjust position of menu items */
}
.wrapper ul li {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}.wrapper ul: Styles the unordered list ul within the navigation menu wrapper: display: flex;: Configures the list items li as flex items, allowing for a flexible layout. justify-content: space-between;: Distributes the list items evenly along the main axis, creating space between them. transform: translateY(-100px);: Translates the entire list upward by 100 pixels, adjusting its position vertically on the page.
.wrapper ul li: Styles each list item li within the unordered list: list-style: none;: Removes default list styling (bullets). display: flex; align-items: center; justify-content: center; text-align: center;: Aligns content within each list item both horizontally and vertically, ensuring centered text and icons.
/* Button Styling */
.light-button button.bt {
position: relative;
height: 200px;
display: flex;
align-items: flex-end;
outline: none;
background: none;
border: none;
cursor: pointer;
}.light-button button.bt: Styles the buttons button within the navigation menu:
position: relative;: Establishes the button as a positioned element, enabling the use of absolute positioning for child elements. height: 200px;: Sets the height of the button to a fixed size for consistency. display: flex; align-items: flex-end;: Aligns the button content to the bottom of the button container using flexbox. outline: none; background: none; border: none;: Removes default button styling (outline, background, border) to create a custom appearance.
cursor: pointer;: Changes the cursor to a pointer when hovering over the button, indicating interactivity.
/* Button Content Holder Styling */
.light-button button.bt .button-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: #0a0a0a; /* Dark background color for button */
border-radius: 5px;
color: #1c1b1b;
transition: 300ms; /* Smooth transition effect */
outline: #1c1b1b 2px solid; /* Initial outline color and thickness */
outline-offset: 20; /* Offset outline from button */
font-weight: 500;
}.light-button button.bt .button-holder: Styles the container .button-holder for button content: display: flex; flex-direction: column; justify-content: center; align-items: center;: Configures the container as a flex container with a column layout, centering its child elements vertically. width: 100px; height: 100px;: Sets the dimensions (width and height) of the button content holder. background-color: #0a0a0a;: Sets the background color of the button content holder to a dark shade.
border-radius: 5px; color: #1c1b1b;: Applies border radius and text color to the button content. transition: 300ms;: Adds a smooth transition effect for property changes. outline: #1c1b1b 2px solid; outline-offset: 20;: Sets an initial outline around the button content with specific color, thickness, and offset. font-weight: 500;: Specifies the font weight of the text within the button content holder for emphasis.
/* Icon Styling */
.light-button button.bt .button-holder a {
font-size: 40px;
color: #1c1b1b;
transition: 300ms; /* Smooth transition effect */
}
/* Text Label Styling */
.light-button button.bt .button-holder p {
font-size: 16px;
letter-spacing: 0.6px;
}Styles the anchor tag a containing the icon: font-size, color Sets the size and color of the icon ion-icon within the button content holder. transition: 300ms;: Adds a smooth transition effect for property changes, such as color on hover. .light-button button.bt .button-holder p: Styles the paragraph tag (<p>) containing the text label within the button content holder: font-size: 16px; letter-spacing: 0.6px;: Specifies the font size and letter spacing of the text label for readability and visual appeal.
/* Light Effect Styling */
.light-button button.bt .light-holder {
position: absolute;
height: 200px;
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
}.light-button button.bt .light-holder: Styles the container for the light effect:
position: absolute; height: 200px; width: 100px;: Positions and sets the dimensions of the light effect holder relative to its parent element. display: flex; flex-direction: column; align-items: center;: Configures the light effect holder as a flex container with a column layout, centering its child elements vertically.
/* Light Effect on Hover */
.light-button button.bt:hover .button-holder a {
color: rgb(21, 249, 0); /* Change icon color on hover */
}
.light-button button.bt:hover .button-holder {
color: rgb(21, 249, 0); /* Change text color on hover */
outline: rgb(21, 249, 0) 2px solid; /* Add outline on hover */
outline-offset: 2px; /* Adjust outline offset on hover */
}
.light-button button.bt:hover .light-holder .light {
background: rgb(255, 255, 255); /* Change background color on hover */
background: linear-gradient(180deg,
rgb(21, 249, 0) 0%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
); /* Apply linear gradient for glowing effect on hover */
}:hover pseudo-class is used to apply styles when the button is hovered over: .light-button button.bt:hover .button-holder a: Changes the color of the icon within the button content holder on hover. .light-button button.bt:hover .button-holder: Changes the text color and adds an outline to the button content holder on hover. .light-button button.bt:hover .light-holder .light: Changes the background color of the light effect .light to create a glowing effect using a linear gradient when the button is hovered over.
These detailed explanations cover the purpose of each CSS property used to style the glowing navigation menu, providing insights into how layout, typography, colors, and interactive effects are implemented to create an engaging user interface. Each property contributes to the overall design and functionality of the navigation menu, ensuring a polished and user-friendly experience for website visitors.
Conclusions
To summarize, the CSS code creates a stylish navigation menu with icons using HTML and Ionicons. It uses neat layout techniques for responsiveness and consistent spacing. The Google Font "Poppins" enhances the text style, while custom button designs and glowing hover effects make the menu visually attractive. The color scheme ties everything together for a cohesive look. Overall, this CSS setup makes the navigation menu user-friendly and appealing, suitable for different types of websites.
Download Source Code