RESPONSIVE SITE MENU

P.Y.G.

RESPONSIVE SITE MENU

Ho trovato questo ottimo tutorial che spiega da zero come realizzare un responsive-site da zero. Se entrate nella demo e effettuate il resize della finestra vi accorgerete che il menu si adatta alla pagina nascondendo le voci di menu e mostrando il tasto di apertura e chiusura della tendina. Questa è la base su cui lavorare per costruire siti che si adattano ad ogni situazione .

----------------------INIZIO TUTORIAL--->

FONTE: http://www.hongkiat.com/

DEMO: http://media02.hongkiat.com/responsive-web-nav/demo/index.html

DOWNLOAD: http://media02.hongkiat.com/responsive-web-nav/demo/source.zip

First of all, let’s add the meta viewport inside the head tag. This meta viewport tag is required for our page to scale properly inside any screen size, particularly in the mobile viewport.

view plaincopy to clipboardprint?

1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

…and then add the following snippet as the navigation markup inside the body tag.

view plaincopy to clipboardprint?

1. <nav class="clearfix">  
2.     <ul class="clearfix">  
3.         <li><a href="#">Home</a></li>  
4.         <li><a href="#">How-to</a></li>  
5.         <li><a href="#">Icons</a></li>  
6.         <li><a href="#">Design</a></li>  
7.         <li><a href="#">Web 2.0</a></li>  
8.         <li><a href="#">Tools</a></li>  
9.     </ul>  
10.     <a href="#" id="pull">Menu</a>  
11. </nav>  

As you can see above, we have six primary menu links and added one more link after them. This extra link will be used to pull the menu navigation when it is hidden in a small screen.

Further reading: Don’t forget the viewport meta tag.

Styles

In this section, we start styling the navigation. The style here is only decorative, you can pick any colors as you desire. But in this case, we (I personally) want the body to have a soft and creamy color.

view plaincopy to clipboardprint?

1. body {  
2.     background-color: #ece8e5;  
3. }  

The nav tag that define the navigation will have 100% full width of the browser window, while the ulwhere it contains our primary menu links will have 600px for the width.

view plaincopy to clipboardprint?

1. nav {  
2.     height: 40px;  
3.     width: 100%;  
4.     background: #455868;  
5.     font-size: 11pt;  
6.     font-family: 'PT Sans', Arial, sans-serif;  
7.     font-weight: bold;  
8.     position: relative;  
9.     border-bottom: 2px solid #283744;  
10. }  
11. nav ul {  
12.     padding: 0;  
13.     margin: 0 auto;  
14.     width: 600px;  
15.     height: 40px;  
16. }  

Then, we will float the menu links to the left, so they will be displayed horizontally side by side, but floating an element will also cause their parent collapse.

view plaincopy to clipboardprint?

1. nav li {  
2.     display: inline;  
3.     float: left;  
4. }  

If you notice from the HTML markup above, we’ve already added clearfix in the class attribute for both the nav and ul to clear things around when we float the elements inside it using this CSS clearfix hack. So, let’s add the following style rules in the style sheet.

view plaincopy to clipboardprint?

1. .clearfix:before,  
2. .clearfix:after {  
3.     content: " ";  
4.     display: table;  
5. }  
6. .clearfix:after {  
7.     clear: both;  
8. }  
9. .clearfix {  
10.     *zoom: 1;  
11. }  

Since we have six menu links and we also have specified the container for 600px, each menu links will have 100px for the width.

view plaincopy to clipboardprint?

1. nav a {  
2.     color: #fff;  
3.     display: inline-block;  
4.     width: 100px;  
5.     text-align: center;  
6.     text-decoration: none;  
7.     line-height: 40px;  
8.     text-shadow: 1px 1px 0px #283744;  
9. }  

The menu links will be separated with 1px right border, except for the last one. Remember our previous post on box model, the menu’s width will be expanded for 1px making it 101px as the border addition, so here we change the box-sizing model to border-box in order to keep the menu remains 100px.

view plaincopy to clipboardprint?

1. nav li a {  
2.     border-right: 1px solid #576979;  
3.     box-sizing:border-box;  
4.     -moz-box-sizing:border-box;  
5.     -webkit-box-sizing:border-box;  
6. }  
7. nav li:last-child a {  
8.     border-right: 0;  
9. }  

Next, the menu will have brighter color when it is in :hover or :active state.

view plaincopy to clipboardprint?

1. nav a:hover, nav a:active {  
2.     background-color: #8c99a4;  
3. }  

…and lastly, the extra link will be hidden (for the desktop screen).

view plaincopy to clipboardprint?

1. nav a#pull {  
2.     display: none;  
3. }  

At this point, we only styling the navigation and nothing will happen when we resize the browser window. So, let’s jump to the next step.

Further reading: CSS3 Box-sizing (Hongkiat.com)

Media Queries

The CSS3 media queries is used to define how the styles will shift in some certain breakpoints or specifically the device screen sizes.

Since our navigation is initially 600px fix-width, we will first define the styles when it is viewed in600px or lower screen size, so practically speaking, this is our first breakpoint.

In this screen size, each of two menu links will be displayed side by side, so the ul‘s width here will be100% of the browser window while the menu links will have 50% for the width.

view plaincopy to clipboardprint?

1. @media screen and (max-width: 600px) {  
2.     nav {  
3.         height: auto;  
4.     }  
5.     nav ul {  
6.         width: 100%;  
7.         display: block;  
8.         height: auto;  
9.     }  
10.     nav li {  
11.         width: 50%;  
12.         float: left;  
13.         position: relative;  
14.     }  
15.     nav li a {  
16.         border-bottom: 1px solid #576979;  
17.         border-right: 1px solid #576979;  
18.     }  
19.     nav a {  
20.         text-align: left;  
21.         width: 100%;  
22.         text-indent: 25px;  
23.     }  
24. }  

…and then, we also define how the navigation is displayed when the screen get smaller by 480px or lower (so this is our second breakpoint).

In this screen size, the extra link that we’ve added before will start visible and we also give the link a “Menu” icon on its right-side using the :after pseudo-element, while the primary menu links will be hidden to save more vertical spaces on the screen.

view plaincopy to clipboardprint?

1. @media only screen and (max-width : 480px) {  
2.     nav {  
3.         border-bottom: 0;  
4.     }  
5.     nav ul {  
6.         display: none;  
7.         height: auto;  
8.     }  
9.     nav a#pull {  
10.         display: block;  
11.         background-color: #283744;  
12.         width: 100%;  
13.         position: relative;  
14.     }  
15.     nav a#pull:after {  
16.         content:"";  
17.         background: url('nav-icon.png') no-repeat;  
18.         width: 30px;  
19.         height: 30px;  
20.         display: inline-block;  
21.         position: absolute;  
22.         rightright: 15px;  
23.         top: 10px;  
24.     }  
25. }  

Lastly, when the screen gets smaller by 320px and lower the menu will be displayed vertically top to bottom.

view plaincopy to clipboardprint?

1. @media only screen and (max-width : 320px) {  
2.     nav li {  
3.         display: block;  
4.         float: none;  
5.         width: 100%;  
6.     }  
7.     nav li a {  
8.         border-bottom: 1px solid #576979;  
9.     }  
10. }  

Now, you can try resizing the browser window. It should now be able to adapt the screen size.

Further reading: Media Queries for Standard Devices.

Showing The Menu

At this point, the menu will still be hidden and will only be visible when it is needed by tapping or clicking on the “Menu” link and we can achieve the effect using the jQuery slideToggle().

view plaincopy to clipboardprint?

1. $(function() {  
2.     var pull        = $('#pull');  
3.         menu        = $('nav ul');  
4.         menuHeight  = menu.height();  
5.   
6.     $(pull).on('click', function(e) {  
7.         e.preventDefault();  
8.         menu.slideToggle();  
9.     });  
10. });  

However, when you resize the browser window right after you’ve just viewed and hid the menu in a small screen, the menu will remain hidden, as the display: none style generated by the jQuery is still attached in the element.

So, we need to remove this style upon the window resizing, as follows:

view plaincopy to clipboardprint?

1. $(window).resize(function(){  
2.     var w = $(window).width();  
3.     if(w > 320 && menu.is(':hidden')) {  
4.         menu.removeAttr('style');  
5.     }  
6. });  

Alright, that’s all the codes we need, we can now view the navigation from the following links, and we recommend you to test it in a responsive design test tool, such as the Responsinator, so that you can view it in various width at once.