Ex No: 6 RESPONSIVE NAVIGATION MENU
Aim: To design a responsive navigation menu that changes based on the size of the screen using media queries.
Algorithm
Step1: Create a folder “Ex6” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use CSS media queiries to set css property for the navigation menu.
CSS Property Description
@media screen querise the screen size
max-width, min-width Specify maximum and minimum width for media queries
background-color Specify background color
text-align Align text in an element
border Specify border property
border-radius Specify rounded corner radius
width, height Specify width and height value
font-size Specify size of the font
Source Code

index.html


<!DOCTYPE html>
<html>
<head>
  <title>Responsive Nav</title>
  <style>
    header {
      text-align: center;
      height: 100px;
      background-color: #60dd5a;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
    }
    article {
      width: auto;
      border: 2px solid gray;	
      padding: 10px;
      border-radius: 10px;
      margin: 5px;
    }
    footer {
      text-align: center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: #f1dc73;
      padding: 10px;
      border-radius: 10px;
    }
    nav {
      background-color:  #2e86c1; /* Default background color for larger screens */
      text-align: left;
      font-size: 15px;
      padding: 10px;
	  border: solid 1px black;
      border-radius: 0px 0px 10px 10px;
    }
    nav a {
      margin-right: 20px;
      color: #fff;
      text-decoration: none;
    }
    /* Responsive CSS for smaller screens */
    @media screen and (max-width: 720px) and (min-width:480px) {
      nav {
        background-color:   #f1c40f; /* Change background color for smaller screens */
        text-align: center;
      }
      nav a {
        color:black;
        margin-left: 20px;
        padding-left: 20px;
        border-left: 2px solid black;
      }
    }
		
    /* Responsive CSS for smaller screens */
    @media screen and (max-width: 480px) {
      nav {
        background-color:  #e74c3c; /* Change background color for smaller screens */
        text-align: center;
      }
      nav a {
        display: block;
        margin: 5px;
        padding-bottom: 5px;
        border-bottom: 1px dotted black;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>CSS Media Query</h1>
  </header>
  <nav>
    <a href="#home">Home</a>
    <a href="#mission">Mission</a>
    <a href="#contact">Contact</a>
  </nav>
  <article>
    <p>
      Responsive Navigation Tag
    </p>
    <br>
  </article>
  <footer>
    Developed by Dr. D. Natarajasivan
  </footer>
</body>
</html>
Result: Thus a webpage is designed show a responsive navigation menu that changes based on the size of the screen using media queries.