Mega Drop Down Menu | New Think Tank

In this video we create a responsive and fluid mega drop down menu based on the Boston Globe.

One of you guys told me their employer hires people based on how well they can recreate the Boston Globes website, so I decided to recreate the mega drop down menu used there in this one video. The Boston Globes site is considered by many to be a great example of responsive web design so I thought we could learn a lot by remaking it.

You may also enjoy these videos : Learn CSS3 in One Video, Responsive Web Design, and Learn HTML5 in One Video.

If you like videos like this, it helps to tell Google with a click here [googleplusone]

Code From the Video

layouttext.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mega Drop Down</title>
  <link rel="stylesheet" href="css/style-test.css" />
</head>
<body>
  <div class="wrapper">

  <ul class="nav">
  <li><a href="#">News</a></li>
  <li><a href="#">Metro</a>

    <div class="nav-main">

      <div class="nav-divider"></div>

      <div class="nav-focus-art">
        <img class="nav-art-image" src="http://lorempixel.com/113/111/technics" alt="article image"/>
        <span class="nav-art-author">ERIC SCHMIDT</span> <br>
        <span class="nav-art-title">We Messed Up the Comments Again</span>
      </div>

      <div class="nav-divider-2"></div>

      <div class="nav-focus-art">
        <img class="nav-art-image" src="http://lorempixel.com/113/111/animals" alt="article image"/>
        <span class="nav-art-author">DEREK BANAS</span><br>
        <span class="nav-art-title">Why I Can't Answer Comments Anymore</span>
      </div>

      <div class="nav-divider-2"></div>

      <div class="nav-headlines">

        <div class="nav-headline-link">MORE HEADLINES</div>
        <div class="nav-headline-link">First they required a Google+ account and now this</div>
        <div class="nav-headline-link">Why does YouTube keep changing a comment system for the worse?</div>
        <div class="nav-headline-link">Why listing comments based on when they were submitted was a good thing</div>
        <div class="nav-headline-link">How I started to enjoy all of the new spam I was receiving</div>
        <div class="nav-headline-link">Viewers wonder why Derek doesn't respond to comments</div>

      </div>

      <div class="nav-divider-2"></div>

      <div class="nav-links">

        <div class="nav-link">MORE IN NEWS</div>
        <div class="nav-link">NATION</div>
        <div class="nav-link">WORLD</div>
        <div class="nav-link">HEALTH & WELLNESS</div>
        <div class="nav-link">IDEAS</div>

      </div>

      <div class="nav-links">

      <div class="nav-empty-cell"></div>
      <div class="nav-link">INVESTIGATIONS</div>
        <div class="nav-link">SPECIAL REPORTS</div>
        <div class="nav-link">SCIENCE</div>
        <div class="nav-link">TRAFFIC</div>
        <div class="nav-link">WEATHER</div>

      </div>

    </div> <!-- End of nav-main -->

    </li>
  <li><a href="#">Arts</a></li>
  <li><a href="#">Business</a></li>
  <li>
    <a href="#">Sports</a></li>
  <li><a href="#">Opinion</a></li>
  <li><a href="#">Politics</a></li>
  <li><a href="#">Lifestyle</a></li>
  <li><a href="#">Magazine</a></li>
  <li><a href="#">Insiders</a></li>
</ul>

  </div> <!-- End of wrapper -->
</body>
</html>

style-test.css

* {
  /* Used so padding and margins fit in elements defined size */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0; margin: 0;
}

body {
  font-family: "PT Sans", sans-serif;
  background: #f5f5f5;

  /* Used so 1.6 em = 16pts */
  font-size: 62.5%;
}

.wrapper {
  font-size: 1.6em;
  padding: 2em;
  margin: 0 auto;
  width: 95%;
  background-color: white;
}

/* Navigation Bar Styling */

.nav {
  background: white;
  width: 100%;
  height: 43px;

  /* Used so the menu drop down can be placed absolutely */
  position: relative;
  border: 1px solid #B2BEB5;
}

.nav li {
  list-style: none;
  float: left;
  text-align: center;
  width: 10%; /* fallback for non-calc() browsers */

  /* Width divided between the 10 items on the bar */
  width: calc(100% / 10);
}

/* Style links in nav bar */
.nav > li > a {
  color: #536267;
  font-weight: bold;
  font-size: .7em;
  text-decoration: none;
  line-height: 43px;
  padding: 0 20px;
  height: 43px;
  text-transform: uppercase;
}

.nav > li:hover  {
  border-right: 1px solid #B2BEB5;
  border-left: 1px solid #B2BEB5;
}

/* On hover show the menu drop down */
.nav > li:hover > div {
  display: block;
}

/* Position the menu drop down relative to the nav bar */
.nav > li > div {
  position: absolute;
  left: 0;
  top: 41px;

  /* Don't show unless the nav bar li is hovered */
  display: none;
  background: #fff;
  padding: 10px 10px;
  box-shadow: 2px 4px 4px rgba(0,0,0,0.4);

  /* Hide anything that might be outside the div */
  overflow: hidden;
}

/* End of Navigation Bar Styling */

/* Drop Down Menu Styling */

.nav-main {
  width: 100%;
  border: 1px solid #B2BEB5;
}

.nav-divider {
  display: inline-block;
  width: 1.8%;
}

.nav-focus-art {
  display: inline-block;
  width: 11.5%;
  vertical-align: top;
  text-align: center;
}

.nav-art-author, .nav-art-title {
  display: inline-block;
  padding: 10px 0px;
}

.nav-art-author {
  font-size: .9em;
  color: red;
}

.nav-art-title {
  font-size: 1.4em;
}

.nav-art-image {
  display: inline-block;
}

.nav-divider-2 {
  display: inline-block;
  width: 3.8%;
}

.nav-headlines {
  display: inline-block;
  width: 34.5%;
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  padding-right: 3px;
}

.nav-headline-link {
  border-bottom: 1px solid #B2BEB5;
  padding: 10px 0px;
}

.nav-headline-link:last-child {
  border-width: 0px;
}

.nav-links {
  display: inline-block;
  width: 11.95%;
  vertical-align: top;
  text-align: left;
}

.nav-link { padding-bottom: 20px;}

.nav-empty-cell { padding-top: 40px;}

.nav-headline-link:first-child {
  color: red;
}

.nav-link:first-child {
  color: red;
}

/* End of Drop Down Menu Styling */

Leave a Reply Cancel reply