CHROMATIC-SYSTEM v1.03_NAVIGATION_WITH_DROPDOWN_MENU_DISPLAY_ENGINE

INFORMATION & CODE

Navigation With Dropdown Menu Display

What the Code Does

The code creates a single-page navigation system with a dropdown menu. The HTML provides the structure: a fixed navigation bar contains links for Home, About, and News, plus a Tutorials dropdown containing links to HTML5, CSS3, and JavaScript. Each link points to a corresponding <section> using an id, which provides a destination for that particular piece of content.

How the Code Works

The CSS controls the appearance and behaviour of the navigation. The .navbar is intended to remain fixed at the top of the page, while the .dropdown-content is initially hidden by giving it a height of 0. When the user hovers over Tutorials, .dropdown:hover .dropdown-content changes its height, revealing the three tutorial links. The CSS also styles the navigation links, dropdown, sections, headings, icons, colours, spacing, and responsive behaviour for smaller screens.

The JavaScript provides the section-switching functionality. It selects the normal navigation links with .link, the dropdown links with .dropLink, the normal content sections with .sect, the tutorial sections with .drop, and the introductory .landing section. When a navigation link is clicked, JavaScript prevents the browser from jumping to the anchor, removes the active class from all sections, adds active to the selected section, and hides the landing section. The dropdown links work in the same way but display the corresponding tutorial section instead.

The important part of the system is the CSS/JavaScript relationship. Sections are normally hidden with display: none, while .active.sect and .active.drop change them to display: block. JavaScript therefore controls which section is active, while CSS determines what an active section looks like. For example, clicking About adds the active class to the About section, making it visible while the other sections remain hidden.

How to Use the Code

To use the code, place the HTML in your webpage, save the CSS as styles.css, and save the JavaScript as scripts.js. Make sure the CSS and JavaScript files are in the correct locations specified by the HTML. When the page loads, the landing section is displayed. Clicking Home, About, or News switches to the corresponding section, while hovering over Tutorials opens the dropdown and clicking one of its options displays the relevant tutorial section.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Navigation With Dropdown Menu Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="page">
      <div class="navbar">
        <a href="#home" class="link">Home</a>
        <a href="#about" class="link">About</a>
        <a href="#news" class="link">News</a>
      
        <div class="dropdown">
          <button class="dropbtn">Tutorials <i class="fa fa-caret-down"></i></button>
          <div class="dropdown-content">
            <a href="#html5" class="dropLink"><i class='fab fa-html5'></i> HTML5</a>
            <a href="#css3" class="dropLink"><i class='fab fa-css3-alt'></i> CSS3</a>
            <a href="#javascript" class="dropLink"><i class='fab fa-js'></i> JAVASCRIPT</a>
          </div>
        </div>
      </div>
              
      <section class="landing">
        <h1>E-Nash</h1>
        <h3> Navigation Bar With A Dropdown Menu Inside</h3>
        <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
      </section>
          
      <section class="sect" id="home">
        <h1>Home</h1>
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </section>
                  
      <section class="sect" id="about">
        <h1>About</h1>
        <h3> Mauris quis diam velit.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
          nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
          venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
          Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
          eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
          congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
          sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
          venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
          tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
          lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
        </p>
      </section>
                  
      <section class="sect" id="news">
        <h1>News</h1>
        <h3>Fusce luctus vestibulum augue ut aliquet.</h3>
        <p>Lorem ipsum dolor sit amet, Donec vitae dui eget tellus gravida venenatis.
          Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
          Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
          odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
          congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris
          ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a
          lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper
          ipsum dignissim ac.
        </p>
              
        <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
          concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
          omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
          ad. Eum no molestiae voluptatibus.
        </p>            
      </section>
                  
      <section class="drop" id="html5">
        <h1>HTML5</h1>
        <h3>Fusce luctus vestibulum augue ut aliquet.</h3>
        <p>Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
          luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
          lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
          Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
          venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
          Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
          Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
          odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
          congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris
          ante ligula, facilisis sed ornare eu, lobortis in odio.
        </p>
      </section>
                  
      <section class="drop" id="css3">
        <h1>CSS3</h1>
        <h3>Sed ullamcorper ipsum dignissim ac.</h3>
        <p>Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
          sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
          venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
          Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
          Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
          odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
          congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris
          ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a
          lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper
          ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.
          Donec vitae dui eget tellus gravida venenatis.
        </p>
      </section>
                  
      <section class="drop" id="javascript">
        <h1>Javascript</h1>
        <h3>Consectetur adipiscing elit.</h3>
        <p>Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
          porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
          egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,
          ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
          aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
          convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
          sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
          ornare turpis.
        </p>
      </section>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      .navbar {
        position: fixed
        top: 100px;
        width: 100%;
        overflow: hidden;
        background-color: #333;
        transition-duration: 1s;
      }
      .navbar a {
        float: left;
        font-family: "VT323", cursive;
        font-size: 1.2em;
        color: white;
        text-align: center;
        margin-left: 33px;
        padding: 14px 16px;
        text-decoration: none;
        transition-duration: 1s;
      }
      .dropdown {
        float: left;
        margin-left: 33px;
        font-family: "VT323", cursive;
        font-size: 1.2em;
        overflow: hidden;
        transition-duration: 1s;
      }
      .dropdown .dropbtn {
        font-family: "VT323", cursive;
        font-size: 1.2em;
        border: none;
        outline: none;
        color: #fff;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        transition-duration: 0.5s;
        margin: 0;
      }
      .navbar a:focus, .dropdown:hover .dropbtn {
        background-color: #00ff00;
        color: #333;
      }
      .dropdown-content {
        position: fixed;
        background-color: #f9f9f9;
        min-width: 160px;
        height: 0;
        font-family: "VT323", cursive;
        font-size: 1.2em;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        overflow: hidden;
        transition-duration: 0.5s;
        z-index: 2;
      }
      .dropdown-content a {
        float: none;
        font-family: "VT323", cursive;
        font-size: 1.2em;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        transition-duration: 0.5s;
      }
      .dropdown-content a:hover {
         background-color: #ddd;
       }
       .dropdown:hover .dropdown-content {
         height: 210px;
       }

       .landing {
         width: 100%;
         height: 60vh;
         padding: 20px;
         margin-bottom: 20px;
         border: 1px solid #333;
         display: block;
       }

       .active.landing {
         display: none;
       }

       .sect {
         width: 100%;
         height: 60vh;
         padding: 20px;
         margin-bottom: 20px;
         border: 1px solid #333;
         display: none;
         overflow: auto;
       }

       .active.sect {
         display: block;
       }

       .drop {
         width: 100%;
         height: 60vh;
         padding: 20px;
         margin-bottom: 20px;
         border: 1px solid #333;
         display: none;
         overflow: auto;
       }

       .active.drop {
         display: block;
       }

       h1 {
         left: calc(50% - 45px);
         margin-top: 50px;
         color: #00ff00;
         font-size: 48px;
         text-shadow: -1px 0 1px #555555, 3px 2px #555555;
         text-align: center;
       }
       h2.hand {
         position: relative;
         display: inline-block;
         left: calc(50% - 235px);
         transform: rotate(-30deg)
       }
 
       @media(max-width: 1200px) {
         h2.hand {
           transform: rotate(0deg)
         }
       }
       @media(max-width: 600px) {
         h2.hand {
           display: inline-block;
           left: 0;
           transform: rotate(0deg)
         }
       }
       p.sub {
         position: relative;
         display: inline-block;
         left: calc(50% - 235px);
       }
       @media(max-width: 600px) {
         p.sub {
           display: inline-block;
           left: 0;
         }
       }
       h3,
       p {
         text-align: center;
       }
       .fab {
         margin-right: 10px;
       }
       .fa-html5 {
         color: #ff8800;
       }
       .fa-css3-alt {
         color: #0088ff;
       }
       .fa-js {
         color: #cc0000;
       }
       section {
         width: 100%;
         height: 60vh;
         padding: 20px;
         margin-bottom: 20px;
         border: 1px solid #333;
       }
       @media(max-width: 600px) {
         section {
           height: 100vh;
           padding: 50px 20px 100px;
           overflow: auto;
         }
       }

JAVASCRIPT


                const link = document.querySelectorAll(".link");
const dropLink = document.querySelectorAll(".dropLink");
const sect = document.querySelectorAll(".sect");
const drop = document.querySelectorAll(".drop");
const landing = document.querySelector(".landing");
      
link.forEach((links, index) => {
  link[index].addEventListener("click", (e) => {
    e.preventDefault();
    for(i = 0; i < sect.length; i++) {
      sect[i].classList.remove("active");
      drop[i].classList.remove("active");
    }
    sect[index].classList.add("active");
    landing.classList.add("active");
  });
});

dropLink.forEach((dropLinks, index) => {
  dropLink[index].addEventListener("click", (ev) => {
    ev.preventDefault();
    for(i = 0; i < drop.length; i++) {
      drop[i].classList.remove("active");
      sect[i].classList.remove("active");            
    }
    drop[index].classList.add("active");
    landing.classList.add("active");
  });
});

PREVIEW

E-Nash

Navigation Bar With A Dropdown Menu Inside

Hover over the "Dropdown" link to see the dropdown menu.

Home

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

About

Mauris quis diam velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.

News

Fusce luctus vestibulum augue ut aliquet.

Lorem ipsum dolor sit amet, Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

HTML5

Fusce luctus vestibulum augue ut aliquet.

Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.

CSS3

Sed ullamcorper ipsum dignissim ac.

Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.

Javascript

Consectetur adipiscing elit.

Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.