CSS Navigation Menu✨

-

 A Nevigation menu (nav bar) is one of the most important parts of any website.  It helps visitors move between pages easily and improves the user experience.

In this article, you will learn how to create a simple, clean navigation menu.

🌟 What you will Learn in This                     Article 

  • What a navigation menu is
  • How to design a simple HTML structure 
  • How to style a nav bar using CSS 

✨What is a navigation menu?

A Nevigation menu is a group of links placed at the top of a website that help users move between pages like Home, Contact, About us etc.

Example:-

Home/About us/Gallery/Contact 

✨Why Navigation menu are important?

A good CSS Menu

  • Makes your website look professional 

  • Improves users experience

  • Makes readers stay longer on your website 

  • Boosts SEO and page views 

✍️Types of Navigation Menu 

Different websites use different kinds of navigation menu.Here are some of the most common type.

  • Horizontal Menu: This is the most common type. It appears at the top of the website in a straight line.

  • Vertical Sidebar Menu: Used mostly in dashboards, blogs, and admin panels. It appears on the left or right side.

  • Sticky (fixed) Menu: This menu stays at the top even when the user scrolls the page

  • Dropdown Menu: A menu with sub-items that appears when hovering over a link.

  • Hamburger Mobile Menu: The three-line icon used in mobile website to open and close the menu.

Let's try to create a Horizontal menu:

✅Step 1 : create the HTML structure 

<nav class="nav">

  <ul class="menu">

    <li><a href="#">Home</a></li>

    <li><a href="#">About </a></li>

    <li><a href="#">Contact </a></li>

    <li><a href="#">Gallery</a></li>

  </ul>

</nav>


 ✅Step 2 : Apply CSS design

.nav{

  background:teal;

  padding:10px 20px;

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.logo{

  color:white;

  font-size:20px;

  font-weight:bold;

}

.menu{

  list-style:none;

  margin:0;

  padding:0;

  display:flex;

  gap:15px;

}

.menu li a{

  color:white;

  text-decoration:none;

  padding:8px 12px;

  border-radius:5px;

}

Here output is:

 
Let's try to create Vertical Menu:

✅Crate a HTML structure and apply CSS styles

<html>
<head>
<style type="text/css">
  body
  {
    margin:0px;
  }
  ul{
    list-style:none;
    margin:0px;
    pedding:0px;
    background-color: black;
    width:25%;
    height:100%;
    position: fixed;
  }
  li a
  {
    color:white;
    text-decoration: none;
    padding: 15px 20px;
    display:block;
    text-align:center;
    font-size: 22px;
  }
  .active
  {
    background-color: cyan;
  }
  </style>
  <title></title>
</head>
<body>
  <ul>
    <li><a href="" class="active">Home</a></li>
 <li><a href="">About </a></li>
    <li><a href="">Contact </a></li>
    <li><a href="">Gallery </a></li>
    <li><a href="">Courses </a></li>
  </ul>
</body>
</html>

Here output is:



❓ Frequently Asked Questions (FAQs):

1. What is the best navigation menu for mobile?

A hamburger menu is best for mobile screens.

2. Can I make a menu without javascript?

Yes, simple menus can be done with only CSS, but toggling requires JS.

3. Which CSS property creates horizontal menus?

display:flex;  is most commonly used.

4. How do I center menu items?

Use:- 

justify-content:center;

🎉Conclusion 

A Nevigation menu is a key part of any websites with HTML and CSS,  you can design beautiful, responsive, and user-friendly menus that look great on all devices from horizontal menus to hamburger mobile menus, the possibilities are endless.
With the examples in this guide, you can easily create your own custom navigation menu and use it in your website.





Comments

Post a Comment

Popular posts from this blog

WEBSITE DEVELOPMENT USING HTML AND CSS

-
What is website ? A website is a collection of publicly accessible, interlinked web pages that share a single domain name . Websites, can be created and maintained by an individual, group, business or organisation to serve a variety of purpose. Websites come ina nearly endless variety, including educational sites , news sites , forums , social media sites , e-commerce sites , and so on.  The page within a website are usually a mix of text and other media. That said, there are no rules dictating the form of  a website. Examples of website are: Bing.com    wikipedia.org ,    google.com , amazon.com   etc. Languages used for website development ; The most common programming languages used to develop website are : HTML (Hyper Text Markup Language) JavaScript   CSS (Cascading Style Sheets) PHP: Hypertext Preprocessor Note:- Some of these can be used as an extension of the existing languages but some can be used entirely separate from the other language...
Read more

Introduction to CSS ✍️

-
Image
  Basics About CSS ✍️ Cascading style sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. Cascading style sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags . Using CSS, you can specify s number of style properties for a given HTML element . Each property has a name and a value, separated by a colon (:).  Each property declaration is separated by a semi-colon (;). Advantages of CSS : CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. SEO Benefits - Faster loading times and mobile-friendliness, both facilitated by CSS, are important factors for search engine rankings , which can hel...
Read more

Advanced properties of CSS

-
Image
  In this article you will see how you can display your content better on your website with the help of using Css's properties like, text-shadow and box-shadow. #Whenever you want to apply Text-Shadow on your website in html with using CSS values .  Firstly ,  you should know that t ext -shadow accept four values like ; text-shadow:h-shadow v-shadow blur- radius  color ; h-shadow :- It is  horizontal offset of the shadows , in this positive values move the shadow to the right and the negative values move the shadow to the left. v-shadow :- It is vertical offset of the shadows , in this positive values move the shadow down and the nagative values move the shadow up. blur-radius :- The blur radius works optionally in the text-shadow . A large value makes the shadow more dispersed. Color :- This provides colour to the text-shadow. Example :- Here is how you would use the CSS text -shadow property in a HTML file to add a simple shadow to an <h1> element :...
Read more