Code a Web Magazine Style Dropdown Navigation Menu

Sexy Magazine Dropdown Screenshot

Frontend web development has grown into a very popular niche. With the expansion of jQuery more web designers are beginning to create fantastic animations and page effects. The possibilities are limitless!

In this tutorial we’ll be creating a magazine-style drop down nav menu. This will be created with some fancy CSS3 techniques to work in standards-compliant browsers. Even if you are shaky with jQuery you should be able to keep up with this little bit of code, and possibly learn something new. Check out the live demo script in my example.

Try it Out

View Live Demo – Download Source

Structuring our Page HTML

We should start off by constructing the basic page layout. I’ve done this in HTML with an unordered list for menu links. Both the CSS styles and jQuery library are excluded externally which saves a bit of space. Added below is the heading to our HTML code.

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<linkrel="stylesheet"type="text/css"href="style.css"media="all">

The jQuery library v1.6.2 is hosted on Google’s servers for web developers to use. This can often cut off some of the load to your own servers. Differences are especially noticeable if you are processing tens or hundreds of thousands of visitors daily. I’ve also set my doctype to HTML5, not that it should affect our script.

Moving down a bit in the code let’s take a look at the inner body content. Below is a copy/paste of everything inside the body tag. I have removed the final jQuery code since we’ll be looking at that in a later section.

<divid="head">

    <divclass="wrap">
        <h1><imgsrc="images/logo.jpg"alt="Blog Magazine Logo"></h1>
    </div>
</div>
<divclass="wrap">
    <ulid="nav">
        <li><ahref="#">Homepage</a></li>
        <li><ahref="#">About the Mag</a>
            <ul>
                <li><ahref="#">Company</a></li>
                <li><ahref="#">Authors</a></li>
                <li><ahref="#">Write for Us?</a></li>
                <li><ahref="#">Advertising</a></li>
                <li><ahref="#">Get in Touch</a></li>
            </ul>
        </li>
        <li><ahref="#">Freebies</a>
            <ul>
                <li><ahref="#">PSD</a></li>
                <li><ahref="#">AI Vectors</a></li>
                <li><ahref="#">Patterns</a></li>
                <li><ahref="#">Icons</a></li>
            </ul>          
        </li>
        <li><ahref="#">Tutorials</a>
            <ul>
                <li><ahref="#">HTML5</a></li>
                <li><ahref="#">CSS3</a></li>
                <li><ahref="#">jQuery</a></li>
                <li><ahref="#">PHP MySQL</a></li>
                <li><ahref="#">Ruby on Rails</a></li>
            </ul>
        </li>
        <li><ahref="#">Web Tools</a>
            <ul>
                <li><ahref="#">Performance</a></li>
                <li><ahref="#">Browser Testing</a></li>
                <li><ahref="#">CMS Plugins</a></li>
                <li><ahref="#">Cheat Sheets</a></li>
            </ul>
        </li>
        <li><ahref="#">Originals</a>
            <ul>
                <li><ahref="#">Website Design</a></li>
                <li><ahref="#">Mobile</a></li>
                <li><ahref="#">User Interface</a></li>
                <li><ahref="#">Freelancing</a></li>
                <li><ahref="#">Inspiration</a></li>
            </ul>
        </li>
    </ul>
</div>
So this should finish up our main HTML structure. All the nested lists are using ul elements which are positioned inside a parent list item. Not too difficult if you have a basic grasp in web design and coding. So let’s move right ahead into the CSS styles.

Designing with CSS

I’ll break down each segment of the small style.css file attached with the demo code. We start with a group block resetting margins/padding for the whole document. A simple man’s page reset, really.

1
2
3
4
5
6
* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
/* @group structure */
#head { background: #e1ecf6; height: 100px; padding-top: 15px; border-bottom: 1px solid #d5dce8; }
.wrap { width: 800px; margin: 0 auto; }

The head content will hold a small logo graphic I made in Photoshop. I’ve used .wrap as a class so we can re-use the same styles with our nav menu. This wrapper creates an 800px content div and centers it on the page.

The next group is a bit larger, providing styles for the root nav menu and its list items. Note the #nav selector is on our original unordered list element, so we can use this to select all sub-ul elements later on.

1
2
3
4
5
6
7
/* @group core nav menu */
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: nonecolor: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }

On the root UL I have added 3 solid borders: left, right, and bottom. The top border spans the entire website and this is added in the header area. I’ve additionally rounded the bottom left and right corners. This technique done in CSS3 using -moz, -webkit, and the standard border-radius properties.

The list items are given a z-index of 999 to appear above all other elements. So in this way we would hover off the original li onto our subnav and lose the popup. Instead the li element expands to take up the full height of our new sliding menu and stay on top as we mouse over links. Also position: relative; is added to properly use absolute positioning on the inner list.

The anchor links aren’t too interesting in themselves. They highlight with a white background on hover with two additional borders to the left and right side. On the final hover selector I added another class .hov to be used by jQuery. This will make it so when you move the mouse cursor over sub-menu links the original nav link stays hovered! Pretty neat.

Sub-Navigation Menu Styles

This last CSS code will style our sub menu links. We use absolute positioning to move around our sub-ul element directly to the top of its container. Also a great drop shadow effect using some new CSS3 properties.

1
2
3
4
/* @group subnav */
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }

The individual properties I’ve used and their supporting browsers can get a bit confusing. Below is a small translation guide.

  • -moz-box-shadow – Firefox/Mozilla Engine
  • -o-box-shadow – Opera
  • -webkit-box-shadow – Standard WebKit browsers, Google Chrome or Safari
  • box-shadow – Most others including Microsoft Internet Explorer

Each sub-nav list item is set 180px in width. This defines the max size our menu will pop out to be. If you port over the code you should change this to accommodate sizes in your own template.

1
2
3
4
#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transformuppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
* html #nav ul { margin: 0 0 0 -2px; }

Each sub-menu anchor is set to a height and line-height of 20px. This will keep the menu text centered vertically in each menu block. On hover effect I’ve hidden the borders which are inherited from the parent nav links. All fairly straightforward with CSS styles, and now the final bit of JavaScript to piece it all together.

jQuery Show/Hide Sub Menu

Directly after the final .wrap div our content area ends. So right here I’ve added a new script tag and placed all the jQuery code inside. This makes editing a lot easier, and our code is fairly small anyways.

1
2
3
4
5
6
7
8
9
$(document).ready(function() { 
    $('#nav li').hover(function() {
        $('ul', this).slideDown(200);
        $(this).children('a:first').addClass("hov");
    }, function() {
        $('ul', this).slideUp(100);
        $(this).children('a:first').removeClass("hov");    
    });
});

Start the script by checking if the page document has finished loading. We want to trigger our first function after the user hovers over a list item in the root #nav ul. The first block of function code is made up of two lines.

It targets our inner ul element and adds a slide-down effect to complete in 200 milliseconds. Secondly we need to add the .hov class onto the currently selected anchor link. This keeps the hovered effect in the main link even when moving over sub-navigation links. The second function is our callback parameter for the .hover() method which happens on mouse off.

This is also comprised of 2 simple lines of code. These actually just reverse what we’ve done in the first area. The inner ul is forced to slide up in a quicker animation (100 milliseconds long) and we remove the hover class as well.

 

 

source : http://designshack.net/articles/javascript/code-a-web-magazine-style-dropdown-navigation-menu/

Advertisements

5 thoughts on “Code a Web Magazine Style Dropdown Navigation Menu

  1. Hi friends

    I think that you will agree with me that there is a lot of jewelry lovers
    worldwide. I am a giant jewelry lover,
    too.

    I was looking for some splendid and original necklace for myself for pretty long time.
    I wanted to get something
    truly unique.

    I was searching through a lot of jewelry stores on the internet for over a week, and I
    was lucky enough to find
    the company which is selling a stunning glass necklaces. Wow, I realized that I could get
    a splendid necklace which
    will give me truly special look I was dreaming about.

    So I ordered this necklace from the on-line store which is owned by WEXONMART,
    Inc.

    I placed the order, and I received the package from WEXONMART within two days.
    These guys are pretty fast, for sure.

    I was stunned when I opened a package. The necklace was
    so stunning. These necklaces have been designed by the famous and very talented jewelry designer.
    This designer has a lot of extraordinary clients like country music
    stars, girlfriends of politicians, etc.

    If you are looking for such splendid necklace for yourself than you can
    consider necklaces from WEXONMART, too.

    They are selling a lot of luxury items like
    magnificent crystal vases, amazing gifts for your loved ones, etc.

    I hope that you will find my post helpful.

    Best regards

    LeAnn GARRETSON
    Sausalito, CA.

  2. hey there and thank you for your information – I have certainly picked up something
    new from right here. I did however expertise some technical points using this site, as I experienced to reload the
    site a lot of times previous to I could get it to load
    correctly. I had been wondering if your hosting is OK? Not that I’m complaining, but slow loading instances times will very frequently affect your placement in google and could damage your high quality score if ads and marketing with Adwords. Anyway I’m adding this RSS to my
    email and can look out for much more of your respective exciting content.
    Ensure that you update this again soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s