How to Create a Responsive Navigation - Hongkiat

8/18/2019 How to Create a Responsive Navigation - Hongkiat

1/10

How to Create a Responsive

Navigation

oriq Firdaus (Http://Www.Hongkiat.Com/Blog/Author/Thoriq/) — Coding (Http://Www.Hongkiat.Com/Blog/Category/Coding/)

ne of the trickiest parts to be responsified on a website is “the Navigation”,

is part is really important for the website accessibility, as this is one of the

ays visitors jump over the web pages.

here are actually many ways to create responsive web site navigation and e ven

me jQuery plugins (https://github.com/mattkersley/ Responsive-Menu/) are

vailable to do it in a second (http://sebnitu.github.com/HorizontalNav/).

owever, rather than applying an instant solution, in this post, we are going to

alk you through on how to build a simple navigation from the ground and

ing the CSS3 media queries (http://www.w3.org/TR/css3-

ediaqueries/#media0) and a little jQuery

ttp://www.hongkiat.com/blog/tag/jquery/) to display it in a small screen size

ke the smartphones (http://www.hongkiat.com/blog/evolution-of-mobile-

hones/) properly.

adget Giveawayww.windsorbrokers.com

art by opening your Trading account to Collect your Free device

Get daily articles in your inbox for free.

Insert email address Subscri

http://www.hongkiat.com/blog/tag/jquery/http://www.w3.org/TR/css3-mediaqueries/#media0http://sebnitu.github.com/HorizontalNav/http://sebnitu.github.com/HorizontalNav/http://sebnitu.github.com/HorizontalNav/https://adclick.g.doubleclick.net/pcs/click?xai=AKAOjssA-UBWn8L4xxvcsHXvM5S25d1188ny79QmbROWX5R8yU_0Cu7buCVcinkdmAYiJog-sfqJZMnI6BSLUOGLQwDLT6M9MPXMc67dKY4d8LDjJa8qURMdEZd0Jr13VjBFrMPn8SPi51nCPXKbxt4YTqA0Wd2vjDuSg2QRoBVT21uqxYCm8RtaNif6hPfr5swnn5wclkK_hVJACpCbtSXTHt_SxBkV1Ee24pB7XKmqGEzU2b44GHLfjzsHeUkjisie6thOZv6d2NLY34YISJJwzwwmZgPwo94OHDADcaa4YLl37Tg9kiKmF3-JexGGz8yvujXOK1oLEai9Mv4mVufM0fNiTCsuzU1oR1dKnKfBDjkDB-3DGHosqu13q3fX8OV4SQ6uKRKT9C_5urhsZSDae5dFPSlSOBKLyU-TP6fgqgC1-kgRO7Hj26mBLD9rDfP4xI-9X6nk7gbQVOHqKUUHMsyoT4dIuPlYPfD8rY7bR-F1v5nzdWD9D-6iwr489duGRE-xdIO5v5jCjMWk0MT6ScwR9MJ0vS17bMdj39_YdihD9uDzamFh1JcO8rEn_nah0tM0F7FP1MBjFRmeVXGdYIFR0xCwbjG4rRidfpGfh75h36eiTpkjZNamhwfP_6NkqKkWGKMMEBBND4i9rN-N9EFMGBnuPqqgzpiqqMHW_fYFbnkAq7ZDAGCEK5ZEgbaZXQTioN8as7U-xrNuPaE556A1cD4CdanhyNODt8ojbBkkn7NwkD6zIAWMxgnwCqbAwghlKY2E&sig=Cg0ArKJSzPnZa7lZoBlJ&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-ar-apps-tt-all-trial-124703202-66517751%26utm_content%3Dpuppyscrubber-gif-priceredhttp://www.googleadservices.com/pagead/aclk?sa=L&ai=C-KGhwo7VVrT8B4WiigaexqSoDfaEtsQI1u78xbEC2tkeEAEg6_mUA2CzntGC6C2gAYb63OIDyAEBqAMByAPDBKoEigFP0DaEDmlGTZURRZ71X6QJhDmMHJF49yGgN_dMbQNYUCyGAaZmXtTRGf-xch5f0bsV8-JBZ5mXum3yhPoEnE5ar7v3lw9gUpE8IwUdEjsUThynIYoZkyKDzPDqMwHw8_sMOdadlpHjVGuniKifwGdtPprQiHTYOnk0yhr6eLqv1Xy_brIxf8t31MSIBgGAB76zzDCoB6a-G9gHAQ&num=1&cid=5Gh7sNCwzQamakMq_8ieWShV&sig=AOD64_1ea0Or0bKSr87HMrArPuSIXLoweg&client=ca-pub-8918970543424762&adurl=http://lp.windsorbrokers.com/gadget-giveaway/%3Flang%3Den%26source%3Dgoogle%26medium%3Dcpc%26term%3D%26content%3DGadget_Giveaway%26campaign%3DEgypt_Display_EN_Text_IC%26creative%3D81966531390%26network%3Dd%26adposition%3Dnone%26device%3Dc%26devicemodel%3Dhttps://adclick.g.doubleclick.net/pcs/click?xai=AKAOjssA-UBWn8L4xxvcsHXvM5S25d1188ny79QmbROWX5R8yU_0Cu7buCVcinkdmAYiJog-sfqJZMnI6BSLUOGLQwDLT6M9MPXMc67dKY4d8LDjJa8qURMdEZd0Jr13VjBFrMPn8SPi51nCPXKbxt4YTqA0Wd2vjDuSg2QRoBVT21uqxYCm8RtaNif6hPfr5swnn5wclkK_hVJACpCbtSXTHt_SxBkV1Ee24pB7XKmqGEzU2b44GHLfjzsHeUkjisie6thOZv6d2NLY34YISJJwzwwmZgPwo94OHDADcaa4YLl37Tg9kiKmF3-JexGGz8yvujXOK1oLEai9Mv4mVufM0fNiTCsuzU1oR1dKnKfBDjkDB-3DGHosqu13q3fX8OV4SQ6uKRKT9C_5urhsZSDae5dFPSlSOBKLyU-TP6fgqgC1-kgRO7Hj26mBLD9rDfP4xI-9X6nk7gbQVOHqKUUHMsyoT4dIuPlYPfD8rY7bR-F1v5nzdWD9D-6iwr489duGRE-xdIO5v5jCjMWk0MT6ScwR9MJ0vS17bMdj39_YdihD9uDzamFh1JcO8rEn_nah0tM0F7FP1MBjFRmeVXGdYIFR0xCwbjG4rRidfpGfh75h36eiTpkjZNamhwfP_6NkqKkWGKMMEBBND4i9rN-N9EFMGBnuPqqgzpiqqMHW_fYFbnkAq7ZDAGCEK5ZEgbaZXQTioN8as7U-xrNuPaE556A1cD4CdanhyNODt8ojbBkkn7NwkD6zIAWMxgnwCqbAwghlKY2E&sig=Cg0ArKJSzPnZa7lZoBlJ&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-ar-apps-tt-all-trial-124703202-66517751%26utm_content%3Dpuppyscrubber-gif-priceredhttps://adclick.g.doubleclick.net/pcs/click?xai=AKAOjssA-UBWn8L4xxvcsHXvM5S25d1188ny79QmbROWX5R8yU_0Cu7buCVcinkdmAYiJog-sfqJZMnI6BSLUOGLQwDLT6M9MPXMc67dKY4d8LDjJa8qURMdEZd0Jr13VjBFrMPn8SPi51nCPXKbxt4YTqA0Wd2vjDuSg2QRoBVT21uqxYCm8RtaNif6hPfr5swnn5wclkK_hVJACpCbtSXTHt_SxBkV1Ee24pB7XKmqGEzU2b44GHLfjzsHeUkjisie6thOZv6d2NLY34YISJJwzwwmZgPwo94OHDADcaa4YLl37Tg9kiKmF3-JexGGz8yvujXOK1oLEai9Mv4mVufM0fNiTCsuzU1oR1dKnKfBDjkDB-3DGHosqu13q3fX8OV4SQ6uKRKT9C_5urhsZSDae5dFPSlSOBKLyU-TP6fgqgC1-kgRO7Hj26mBLD9rDfP4xI-9X6nk7gbQVOHqKUUHMsyoT4dIuPlYPfD8rY7bR-F1v5nzdWD9D-6iwr489duGRE-xdIO5v5jCjMWk0MT6ScwR9MJ0vS17bMdj39_YdihD9uDzamFh1JcO8rEn_nah0tM0F7FP1MBjFRmeVXGdYIFR0xCwbjG4rRidfpGfh75h36eiTpkjZNamhwfP_6NkqKkWGKMMEBBND4i9rN-N9EFMGBnuPqqgzpiqqMHW_fYFbnkAq7ZDAGCEK5ZEgbaZXQTioN8as7U-xrNuPaE556A1cD4CdanhyNODt8ojbBkkn7NwkD6zIAWMxgnwCqbAwghlKY2E&sig=Cg0ArKJSzPnZa7lZoBlJ&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-ar-apps-tt-all-trial-124703202-66517751%26utm_content%3Dpuppyscrubber-gif-priceredhttps://adclick.g.doubleclick.net/pcs/click?xai=AKAOjssA-UBWn8L4xxvcsHXvM5S25d1188ny79QmbROWX5R8yU_0Cu7buCVcinkdmAYiJog-sfqJZMnI6BSLUOGLQwDLT6M9MPXMc67dKY4d8LDjJa8qURMdEZd0Jr13VjBFrMPn8SPi51nCPXKbxt4YTqA0Wd2vjDuSg2QRoBVT21uqxYCm8RtaNif6hPfr5swnn5wclkK_hVJACpCbtSXTHt_SxBkV1Ee24pB7XKmqGEzU2b44GHLfjzsHeUkjisie6thOZv6d2NLY34YISJJwzwwmZgPwo94OHDADcaa4YLl37Tg9kiKmF3-JexGGz8yvujXOK1oLEai9Mv4mVufM0fNiTCsuzU1oR1dKnKfBDjkDB-3DGHosqu13q3fX8OV4SQ6uKRKT9C_5urhsZSDae5dFPSlSOBKLyU-TP6fgqgC1-kgRO7Hj26mBLD9rDfP4xI-9X6nk7gbQVOHqKUUHMsyoT4dIuPlYPfD8rY7bR-F1v5nzdWD9D-6iwr489duGRE-xdIO5v5jCjMWk0MT6ScwR9MJ0vS17bMdj39_YdihD9uDzamFh1JcO8rEn_nah0tM0F7FP1MBjFRmeVXGdYIFR0xCwbjG4rRidfpGfh75h36eiTpkjZNamhwfP_6NkqKkWGKMMEBBND4i9rN-N9EFMGBnuPqqgzpiqqMHW_fYFbnkAq7ZDAGCEK5ZEgbaZXQTioN8as7U-xrNuPaE556A1cD4CdanhyNODt8ojbBkkn7NwkD6zIAWMxgnwCqbAwghlKY2E&sig=Cg0ArKJSzPnZa7lZoBlJ&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-ar-apps-tt-all-trial-124703202-66517751%26utm_content%3Dpuppyscrubber-gif-priceredhttp://www.googleadservices.com/pagead/aclk?sa=L&ai=C-KGhwo7VVrT8B4WiigaexqSoDfaEtsQI1u78xbEC2tkeEAEg6_mUA2CzntGC6C2gAYb63OIDyAEBqAMByAPDBKoEigFP0DaEDmlGTZURRZ71X6QJhDmMHJF49yGgN_dMbQNYUCyGAaZmXtTRGf-xch5f0bsV8-JBZ5mXum3yhPoEnE5ar7v3lw9gUpE8IwUdEjsUThynIYoZkyKDzPDqMwHw8_sMOdadlpHjVGuniKifwGdtPprQiHTYOnk0yhr6eLqv1Xy_brIxf8t31MSIBgGAB76zzDCoB6a-G9gHAQ&num=1&cid=5Gh7sNCwzQamakMq_8ieWShV&sig=AOD64_1ea0Or0bKSr87HMrArPuSIXLoweg&client=ca-pub-8918970543424762&adurl=http://lp.windsorbrokers.com/gadget-giveaway/%3Flang%3Den%26source%3Dgoogle%26medium%3Dcpc%26term%3D%26content%3DGadget_Giveaway%26campaign%3DEgypt_Display_EN_Text_IC%26creative%3D81966531390%26network%3Dd%26adposition%3Dnone%26device%3Dc%26devicemodel%3Dhttp://www.googleadservices.com/pagead/aclk?sa=L&ai=C-KGhwo7VVrT8B4WiigaexqSoDfaEtsQI1u78xbEC2tkeEAEg6_mUA2CzntGC6C2gAYb63OIDyAEBqAMByAPDBKoEigFP0DaEDmlGTZURRZ71X6QJhDmMHJF49yGgN_dMbQNYUCyGAaZmXtTRGf-xch5f0bsV8-JBZ5mXum3yhPoEnE5ar7v3lw9gUpE8IwUdEjsUThynIYoZkyKDzPDqMwHw8_sMOdadlpHjVGuniKifwGdtPprQiHTYOnk0yhr6eLqv1Xy_brIxf8t31MSIBgGAB76zzDCoB6a-G9gHAQ&num=1&cid=5Gh7sNCwzQamakMq_8ieWShV&sig=AOD64_1ea0Or0bKSr87HMrArPuSIXLoweg&client=ca-pub-8918970543424762&adurl=http://lp.windsorbrokers.com/gadget-giveaway/%3Flang%3Den%26source%3Dgoogle%26medium%3Dcpc%26term%3D%26content%3DGadget_Giveaway%26campaign%3DEgypt_Display_EN_Text_IC%26creative%3D81966531390%26network%3Dd%26adposition%3Dnone%26device%3Dc%26devicemodel%3Dhttp://www.googleadservices.com/pagead/aclk?sa=L&ai=C-KGhwo7VVrT8B4WiigaexqSoDfaEtsQI1u78xbEC2tkeEAEg6_mUA2CzntGC6C2gAYb63OIDyAEBqAMByAPDBKoEigFP0DaEDmlGTZURRZ71X6QJhDmMHJF49yGgN_dMbQNYUCyGAaZmXtTRGf-xch5f0bsV8-JBZ5mXum3yhPoEnE5ar7v3lw9gUpE8IwUdEjsUThynIYoZkyKDzPDqMwHw8_sMOdadlpHjVGuniKifwGdtPprQiHTYOnk0yhr6eLqv1Xy_brIxf8t31MSIBgGAB76zzDCoB6a-G9gHAQ&num=1&cid=5Gh7sNCwzQamakMq_8ieWShV&sig=AOD64_1ea0Or0bKSr87HMrArPuSIXLoweg&client=ca-pub-8918970543424762&adurl=http://lp.windsorbrokers.com/gadget-giveaway/%3Flang%3Den%26source%3Dgoogle%26medium%3Dcpc%26term%3D%26content%3DGadget_Giveaway%26campaign%3DEgypt_Display_EN_Text_IC%26creative%3D81966531390%26network%3Dd%26adposition%3Dnone%26device%3Dc%26devicemodel%3Dhttp://www.hongkiat.com/blog/evolution-of-mobile-phones/http://www.hongkiat.com/blog/tag/jquery/http://www.w3.org/TR/css3-mediaqueries/#media0http://sebnitu.github.com/HorizontalNav/https://github.com/mattkersley/Responsive-Menu/http://www.hongkiat.com/blog/category/coding/http://www.hongkiat.com/blog/author/thoriq/https://adclick.g.doubleclick.net/pcs/click?xai=AKAOjsvBuBLRYv2L6GhvsocHZxq9Hihvh00N8ZYw6CVot_2AUzLYnLHSjr_14VQyUVm_mpSGcRwEPG0or2CvZbA3fiL3XFpZB9TKH1grH416ptFcW9ONkzKNuYRKWwXJLfWvCCEWkZanllJzurt7FjltdgApMLun_ABW5_QiJvM5tICggvwECy7msZEzQzx4QEWWycFVU4b-civc-UNlnYEiAT8J2iWSmPXNXGkKM5hVWKZZ6ePAdxF9vWBHTj1Zw-mtmTIX8XfCqUSW9-XcJoEBFvCIA0FYesEZvUAzKGSAWf0Fk0O1FKJ1339mMPmEgRFlqGq4nFM2M1iFOBHKVEDmuJtBaVQ7_C1Mvr6K4VvDTKzfYJiK2DjO0iEPO68eIa1VjlLJy12ZEyXJtK1u3U5HuRCkKxOs_bFV2mwC8Sk6mesWiX64z0o_vAbKcfuFeX7OyyYoJKkWi64Gru64BeMT8K0DOcWZbz6s8U5_UeHrTYv0G1oAG1RC9y2ulh_EWaa6kKwWiDrbglVfhXGqFIXu1HKprhy6aQrv5idPDd9fekvqNDcuepwm_MJoz7MqpoBAnP77kS3ZcAWzcW6XUsybkg&sig=Cg0ArKJSzM_aM9af7VLA&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-en-apps-dsk-all-trial-124609622-66325085%26utm_content%3Dpuppyscrubber-gif-priceredhttp://www.hongkiat.com/blog/


2/10

Demo

(http://media02.hongkiat.com/responsive-

web-nav/demo/index.html)

Download Source


web-nav/demo/source.zip)

o, let’s just get started.

HTMLrst of all, let’s add the meta viewport

ttps://developer.mozilla.org/en/Mobile/Viewport_meta_tag) inside the head

g. This meta viewport tag is required for our page to scale properly inside any

reen size, particularly in the mobile viewport.

and then add the following snippet as the navigation markup inside the body

g.

s you can see above, we have six primary menu links and added one more link

ter them. This extra link will be used to pull the menu navigation

ttp://www.hongkiat.com/blog/building-mobile-app-navigation-with-jquery/)

hen it is hidden in a small screen.

urther reading: Don’t forget the viewport meta tag

ttp://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-

rget-the-viewport-meta-tag/).

tyles

this section, we start styling the navigation. The style here is only decorative,

ou can pick any colors as you desire. But in this case, we (I personally) want the

ody to have a soft and creamy color.

1


3/10

he nav tag that define the navigation will have 100% full width of the browser

ndow, while the ul where it contains our primary menu links will have

00px for the width.

hen, we will float the menu links to the left, so they will be displayed

orizontally side by side, but floating an element will also cause their parent

llapse.

you notice from the HTML markup above, we’ve already added clearfix in

e class attribute for both the nav and ul to clear things around when we

oat the elements inside it using this CSS clearfix hack

ttp://nicolasgallagher.com/micro-clearfix-hack/). So, let’s add the following

yle rules in the style sheet.

1

2

3

body {

background‐color: #ece8e5;

}

1

2

3

4

5

6

7

8

9

10

11

12

1314

15

16

nav {

height: 40px;

width: 100%;

background: #455868;

font‐size: 11pt;

font‐family: 'PT Sans', Arial, sans‐serif;

font‐weight: bold;

position: relative;

border‐bottom: 2px solid #283744;

}

nav ul {

padding: 0;

margin: 0 auto; width: 600px;

height: 40px;

}

1

2

3

4

nav li {

display: inline;

float: left;

}

1

2

3

4

5

6

7

8

9

10

11

.clearfix:before,

.clearfix:after {

content: " ";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

Popular

In

Coding

(http://www.h

audio-

transcript/)

How to D

Transcrip

Played A

(http://ww

audio-traPreethi Ran(Http://Ww

(http://www.h

w3c-data-

using-web-ap

How to D

Specifica

using its(http://ww

w3c-data

api/)

Preethi Ran(Http://Ww

(http://www.h

plugins/)

10 Aweso

Plugins t

Giveaway: DesignCrowd $450 Custom Logo Design - 1 Winner (Closed)

ttp://www.hongkiat.com/blog/giveaway-dc-logo-design-contest/)

How to Customize Facebook Cover with Instagram Photos [Quicktip]

(http://www.hongkiat.com/blog/instagram-facebook-cover/)

http://www.hongkiat.com/blog/giveaway-dc-logo-design-contest/http://www.hongkiat.com/blog/giveaway-dc-logo-design-contest/http://www.hongkiat.com/blog/postcss-plugins/http://www.hongkiat.com/blog/postcss-plugins/http://www.hongkiat.com/blog/instagram-facebook-cover/http://www.hongkiat.com/blog/giveaway-dc-logo-design-contest/http://www.hongkiat.com/blog/postcss-plugins/http://www.hongkiat.com/blog/postcss-plugins/http://www.hongkiat.com/blog/author/preethi/http://www.hongkiat.com/blog/display-w3c-data-using-web-api/http://www.hongkiat.com/blog/display-w3c-data-using-web-api/http://www.hongkiat.com/blog/author/preethi/http://www.hongkiat.com/blog/display-audio-transcript/http://www.hongkiat.com/blog/display-audio-transcript/http://www.googleadservices.com/pagead/aclk?sa=L&ai=C7f8txo7VVrjWOsibigbf-L3wDv-HreEHv4DltcECkIOFngsQASDr-ZQDYLOe0YLoLaAB5aGy7APIAQGoAwHIA8MEqgSNAU_Q2AxURA5tkGIYNcQOPc2pJZbq0Rl1ceYxhbjPZjY3-8XgipilNlVtGRuJrh5WjVsuwjAjC_5NBt9MIs5ePLfV_pG_TqeEt0LWXCjcYALhnXWECA957E1Y8D3eOdRXaCFmyHWWW3X8-RNI4xlcAALNeJz1QoQNrr3J0zA3BVkNFCZmDScZi8e7oLinOIgGAYAH_9myKKgHpr4b2AcB2BMM&num=1&cid=5GiL4P2_JJVzH38r4ZX4oNoc&sig=AOD64_0oK0bmH1bNTu9yA9Auu8nLOAgWjA&client=ca-pub-8918970543424762&adurl=http://www.facebook.com/campaign/landing.php%3F%26campaign_id%3D114503682250168%26extra_1%3DcNZiSrI3J%7Cc%7C86151849879%7C%7C%7Cwww.hongkiat.com%7C8095zyy44898%26placement%3Dwww.hongkiat.com%26creative%3D86151849879%26keyword%3D%26partner_id%3Dgooglesem%26extra_2%3Dnetwork%253Dd%2526matchtype%253D%2526target%253Dboomuserlist%253A%253A56012076%2526source%253D%2526adposition%253Dnone%2526aceid%253D%2526geo_id%253D1005394http://nicolasgallagher.com/micro-clearfix-hack/


4/10

nce we have six menu links and we also have specified the container for

00px , each menu links will have 100px for the width.

he menu links will be separated with 1px right border, except for the last one.

emember our previous post on box model, the menu’s width will be expanded

r 1px making it 101px as the border addition, so here we change the box‐

zing model to border‐box in order to keep the menu remains 100px .

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

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

t this point, we only styling the navigation and nothing will happen when we

size the browser window. So, let’s jump to the next step.

1

2

3

4

5

6

7

8

9

nav a {

color: #fff;

display: inline‐block;

width: 100px;

text‐align: center;

text‐decoration: none;

line‐height: 40px;

text‐shadow: 1px 1px 0px #283744;

}

1

2

3

4

5

6

7

8

9

nav li a {

border‐right: 1px solid #576979;

box‐sizing:border‐box;

‐moz‐box‐sizing:border‐box;

‐webkit‐box‐sizing:border‐box;

}

nav li:last‐child a {

border‐right: 0;

}

1

2

3

nav a:hover, nav a:active {

background‐color: #8c99a4;

}

1

2

3

nav a#pull {

display: none;

}

(http://ww

plugins/)

Anna Monu(Http://Ww

(http://www.h

6/)

ECMAScAwesom

Features

(http://ww

6/)

Anna Monu(Http://Ww

(http://www.h

experiment-

codepen/)

20 Aweso

Christma

Hidden in

(http://ww

experime

Anna Monu(Http://Ww

(http://www.h

source-

community-

give-back/)

10 Ways

Contribu

Open So

Commun

(http://ww

source-c

give-bac

Anna Monu(Http://Ww

http://www.hongkiat.com/blog/author/anna_monus/http://www.hongkiat.com/blog/open-source-community-give-back/http://www.hongkiat.com/blog/open-source-community-give-back/http://www.hongkiat.com/blog/author/anna_monus/http://www.hongkiat.com/blog/christmas-experiment-codepen/http://www.hongkiat.com/blog/christmas-experiment-codepen/http://www.hongkiat.com/blog/author/anna_monus/http://www.hongkiat.com/blog/ecmascript-6/http://www.hongkiat.com/blog/ecmascript-6/http://www.hongkiat.com/blog/author/anna_monus/http://www.hongkiat.com/blog/postcss-plugins/https://adclick.g.doubleclick.net/pcs/click?xai=AKAOjsvMrTYje74Qe1BjkjIfsZooB2DeOLTnr0xMfhS9MzbPlnjFShyNRr0psZioZOZ1I50QKCXPIhXd19duSE13ahoXk_gH6l3oaSFQ1XQXPkccyR2DX9WGSvr8PTrfvUBP5DcmCs889v2Lx0P4oYmKKD35OC7kBBGgNtKDV9NUed4-CVIXpjoIqPFkEp1Y632I6ULtRrIJ7oUk1RSRXZlyNkAFjfBMzG75Eu2t9nSpvjW6fOVAamQJFcRMEcrmKr2Ve_FOqbnwN0O8m2F-1bYD5farA__58j_IofRtdSlcqvoHlKhuMEJrMUMRCYkmXg_q-OnJraF_QZX-1tlP9BOYg2-WWTmP3KaUawxUmul5mwqaKnxGAuySVPnzuB_lTGvGSklsi-ElVBvTz2HnzjfzR3RaQ9IviKJLKCFhC97Vk_W1H3dUC91MGLFLIqjzSBF-b1pErKh2YbPVnPhUWlajucwron6wJpqWK9PY-OsF5crMCz7-doVViMj8BSdrrxSb1qRmLbkIja82jfnqOJSk4nvQ391nOQ_p8cN9KUyfFv8kvkbGK-2yDN8EXgTSgzmn2oPzLb0bvcAzD6_vK9zMsTiP&sig=Cg0ArKJSzMahQ2yxOPdB&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-en-apps-dsk-all-trial-124609625-66325083%26utm_content%3Dpuppyscrubber-gif-pricered


5/10

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

Media Queries

he CSS3 media queries (http://www.w3.org/TR/css3-mediaqueries/#media0) is

ed to define how the styles will shift in some certain breakpoints or

ecifically the device screen sizes.

nce our navigation is initially 600px fix-width, we will first define the styles

hen it is viewed in 600px or lower screen size, so practically speaking, this is

ur first breakpoint.

this screen size, each of two menu links will be displayed side by side, so the

l ‘s width here will be 100% of the browser window while the menu links will

ave 50% for the width.

(http://www.h

web-

developers/)

30 Regex

Snippets

Develope

Know

(http://wwweb-deve

Jake Roche(Http://Ww

(http://www.h

calendar-

javascrip t/)

How to B

Advent C

JavaScri

(http://ww

calendar

Anna Monu(Http://Ww

(http://www.h

margin-auto/)

CSS – ma

How it W(http://ww

margin-a


(http://www.h

animated-

dashed-

border/)

How to A

Dashed B

CSS

(http://ww

animated

border/)


http://www.hongkiat.com/blog/author/preethi/http://www.hongkiat.com/blog/css-animated-dashed-border/http://www.hongkiat.com/blog/css-animated-dashed-border/http://www.hongkiat.com/blog/author/preethi/http://www.hongkiat.com/blog/css-margin-auto/http://www.hongkiat.com/blog/css-margin-auto/http://www.hongkiat.com/blog/author/anna_monus/http://www.hongkiat.com/blog/advent-calendar-javascript/http://www.hongkiat.com/blog/advent-calendar-javascript/http://www.hongkiat.com/blog/author/jake/http://www.hongkiat.com/blog/regex-web-developers/http://www.hongkiat.com/blog/regex-web-developers/http://www.w3.org/TR/css3-mediaqueries/#media0


6/10

and then, we also define how the navigation is displayed when the screen get

maller by 480px or lower (so this is our second breakpoint).

this screen size, the extra link that we’ve added before will start visible and

e also give the link a “Menu” icon on its right-side using the :after pseudo-

ement (http://www.hongkiat.com/blog/pseudo-element-before-after/), while

e primary menu links will be hidden to save more vertical spaces on the

reen.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

@media screen and (max‐width: 600px) {

nav {

height: auto;

}

nav ul {

width: 100%;

display: block;

height: auto;

}

nav li {

width: 50%;

float: left;

position: relative;

}

nav li a {


border‐right: 1px solid #576979;

}

nav a {

text‐align: left;

width: 100%;

text‐indent: 25px;

}

}

(http://www.h

edges-css/)

How to C

Skewed

CSS

(http://ww

edges-cs

Agus(Http://Ww

(http://www.h

tricks-more/)

10 (More

You Prob

Overlook

(http://ww

tricks-mo


http://www.hongkiat.com/blog/author/preethi/http://www.hongkiat.com/blog/css-tricks-more/http://www.hongkiat.com/blog/css-tricks-more/http://www.hongkiat.com/blog/author/agus/http://www.hongkiat.com/blog/skewed-edges-css/http://www.hongkiat.com/blog/skewed-edges-css/https://adclick.g.doubleclick.net/pcs/click?xai=AKAOjsvr0bfyFwgugA19XLxkZZu1GfX2mFVUya1oua10k6HszgXO1I7AHKTpCrV03G5AjfZchQsQRFMHb8Weg0X6uFVtYjmPvtmRxY6dhUyH2xzUVhmtGQVUloYoNsiJ3TvKf7hFh03agHV1bE09oxesF7_sR0nU9ooTeKm_6zmkBp-TOBIOnS-d-vxsMzBy74YQu1SEivsu-qC_ESuaAq_RNKUM-B08dxXZcZ6-LtTZXgdM05MWcQlQYqjFaizD5009WE6amTSXFbuT1zsabgZybzQq3GSgGv3jn2K2tMWX6YAgiVEZokrZtGrQnpVviXJvRw3eJE5_WsLecgVuvHQF0StzE2_y9pXhBBcc_b2vRbC7ezDwjp8X81Na-H_2vSkRAwn1NIeaaPt7omg14uMBp5VTyPRg6AEWX1Hcwc18ZhoV-NN8nFZk0M1PWKc_CWPCf0QCzfg2G9M-6mRW9roo9mADmSpE6DF8WyHoUNdHHtLAtsewClJIvPLDydOBoCgndF0AyeRHkGC5TMCnr6NeDKZVhE3Q8fREEbjmOiezVEwyo9fwaod3RVnpxs13MBWn9gaQEiuuG4i4u2PJVdwwAqiZHg113u5kQ1cRFeL7RVp2G_pu8Wk27bJUcXo&sig=Cg0ArKJSzEW9uFB0zlo-&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-en-apps-default-all-trial-124609625-59239209%26utm_content%3Ddefault-priceredhttp://www.hongkiat.com/blog/pseudo-element-before-after/


7/10

astly, when the screen gets smaller by 320px and lower the menu will be

splayed vertically top to bottom.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

@media only screen and (max‐width : 480px) {

nav {

border‐bottom: 0;

}

nav ul {

display: none;

height: auto;

}

nav a#pull {

display: block;

background‐color: #283744;

width: 100%;

position: relative;

}

nav a#pull:after {

content:"";

background: url('nav‐icon.png') no‐repeat;

width: 30px;

height: 30px;

display: inline‐block;

position: absolute;

right: 15px;

top: 10px;

}

}

12

3

4

5

6

7

8

9

10

@media only screen and (max‐width : 320px) { nav li {

display: block;

float: none;

width: 100%;

}

nav li a {


}

}


8/10

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

e screen size.

urther reading: Media Queries for Standard Devices (http://css-

icks.com/snippets/css/media-queries-for-standard-devices/).

howing the Menu

t this point, the menu will still be hidden and will only be visible when it is

eeded by tapping or clicking on the “Menu” link and we can achieve the effect

ing the jQuery slideToggle() .

owever, when you resize the browser window right after you’ve just viewed

nd hid the menu in a small screen, the menu will remain hidden, as the

isplay: none style generated by the jQuery is still attached in the element.

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

right, that’s all the codes we need, we can now view the navigation from the

llowing links, and we recommend you to test it in a responsive design test

ol, such as the Responsinator (http://www.responsinator.com/), so that you

n view it in various width at once.

Demo


web-nav/demo/index.html)

Download Source


web-nav/demo/source.zip)

onus: An Alternative Way

1

2

3

4

5

6

7

89

10

$(function() {

var pull = $('#pull');

menu = $('nav ul');

menuHeight = menu.height();

$(pull).on('click', function(e) {

e.preventDefault();

menu.slideToggle(); });

});

1

2

3

4

5

6

$(window).resize(function(){

var w = $(window).width();

if(w > 320 && menu.is(':hidden')) {

menu.removeAttr('style');

}

});

http://media02.hongkiat.com/responsive-web-nav/demo/source.ziphttp://media02.hongkiat.com/responsive-web-nav/demo/index.htmlhttp://www.responsinator.com/http://css-tricks.com/snippets/css/media-queries-for-standard-devices/


9/10

s we have mentioned earlier in this post, there some other ways of doing it,

nd using a JavaScript library called SelectNav.js

ttp://lukaszfiszer.github.com/selectnav.js/) is one of the easiest way . This is

pure JavaScript that is not relying on another third party library like jQuery.

asically, it will duplicate your list menu and transform it into a

opdown menu, then you are able to choose which one is hidden or shown

pending on the screen size through media queries.

ne of an advantage I like on this practice is that we don’t have to worry on theavigation style as the menu will make use of the native user

terface from the device itself.

ease, refer to the official documentation

ttp://lukaszfiszer.github.com/selectnav.js/#how) for further implementation.

onclusion

e have come through all the way to create responsive navigation from scratch.his one we have created here is just one of examples, and as we stated earlier

this post and shown above, there are many other solutions you can implment.

o, it is now leave to your decision to pick which practice that best fit to cater

quirement and your web site navigation structure.

Readers also read:

http://www.googleadservices.com/pagead/aclk?sa=L&ai=CoB-Gw47VVpXZLYawjAaahaSQB_uqsOUHy_P9lOgCpMbfzhIQASDr-ZQDYLOe0YLoLaABzeOk9QPIAQOpAmVwLf7qPbI-qAMByAPBBKoEjwFP0FKoxu_s82R5CJrje5j13nWMt7gk_s2C6K1QHfpY6wmMxVh5k0vkxLefFwMKSnNtJegGfVVSwYAYhEJQ9MVKw2fTNR8gTIFT7A4CG9MKde0YPMGvI5v7IBG6lhIXbfMd6XVRdtn39Uv8AMIfOJcjJ-oC3ibClacrAPijJfN9bn1-Wox50fKDh_-kHPZlT4gGAaAGA4AHm5zbCqgHpr4b2AcB2BMD&num=1&cid=5GgqXrm8sJSW8p1sPed2U19Q&sig=AOD64_0RKrGlRhb0DA8fIzAwZInp0m-3HQ&client=ca-pub-8918970543424762&adurl=http://www.soundsnap.com/http://lukaszfiszer.github.com/selectnav.js/#howhttp://lukaszfiszer.github.com/selectnav.js/


10/10

ead more posts on: navigation (http://www.hongkiat.com/blog/tag/navigation/) ,

sponsive (http://www.hongkiat.com/blog/tag/responsive/) ,

esponsive Web Design (http://www.hongkiat.com/blog/tag/rwd/)

Wrapping

Content In

Shapes With

CSS3

(http://www.hongkiat.com/blog/css3-

content-

wrapping/)

Working with

Text in Scalable

Vector

Graphics (SVG)

(http://www.hongkiat.com/blog/scalable-

vector-

graphics-text/)

Working with

Code Snippets

in Sublime Text

(http://www.hongkiat.com/blog/sublime-

code-snippets/)

M U T E H D

P A U S E

About (/blog/abou t-us/) Advertise (/blog/adve rtise/) Contact (/blog/contact/) Submit Tips (/blog/submit-news-tips/) Authors (/blog/auth ors

Write for Us (/blog/write-for-us/) Publishing Policy (/blog/publishing-policy/) Privacy (/blog/privacy-policy-for-hongkiatcom/) Sitemap

(/blog/sitemap.xml)

(http://www.exabytes.com/) (https://www.maxcdn.com/)
https://www.maxcdn.com/http://www.exabytes.com/http://www.hongkiat.com/blog/sitemap.xmlhttp://www.hongkiat.com/blog/privacy-policy-for-hongkiatcom/http://www.hongkiat.com/blog/publishing-policy/http://www.hongkiat.com/blog/write-for-us/http://www.hongkiat.com/blog/authors/http://www.hongkiat.com/blog/submit-news-tips/http://www.hongkiat.com/blog/contact/http://www.hongkiat.com/blog/advertise/http://www.hongkiat.com/blog/about-us/https://adclick.g.doubleclick.net/pcs/click?xai=AKAOjsvD_l5QG5pRI3TiFtiXhR2g6yjD4Zibit3tp8Rp0EdWjDnbwJG3z2Vt5g_xNjG7cwSGDSw86a8IZ8AiWBY5T9BCPREfiY8MKPMlgIFpOpMzMY31O7CR30iNrCIN11S0EeeKNFIMcjQZCGGq1rU7sVzolQwxTOSGXRSZf0guJHh1RTQX1cosULoastbwoMUFrNxU9xMYAD69abrWn5yybgrsdndkK7E_OnZTcd_yEvfy9i7f67JEVdN5nae9oCxP2coCS_2xkga7TaGS6qX5FhC1WQAM_RY-ZlXweqmowgikMouKHeyDyse7Jo07fOcVyvELyo8Kw8WuaY0amQxU3EJ3pH1AqJ614P3pGhgIvUC37kMPxFqmDMwK7p_14lHJ-cb1DEyye7bxNHYivbMjGkMgBPwXzVp-Fot2wVRxAb9MmKIO9vYRkYTKwVBA3fbV9dtlFtahoJ9akW-ooPsrz4CtXUdr5DLh4sfuHESwFFLoFlMv3wdknz0CV4BgeHDiZE9p96lQHhetE9O1hlLmjT_uVYgZLyOSTmL4Hzo6ipBh1yHHKcc4CBMaF7-KbcriNtTCci3zV2SQDedbH5QGYX-8drcU16bMo1f088Nwg1sN8Wn--wKqUjp-jZizte9r4PfwjQ&sig=Cg0ArKJSzEnurwETYgH8&urlfix=1&adurl=https://apps.google.com/intx/ar_eg/products/gmail/index.html%3Futm_source%3Dgdn%26utm_medium%3Ddisplay%26utm_campaign%3Demea-eg-en-apps-dsk-all-trial-124609622-66325085%26utm_content%3Dpuppyscrubber-gif-priceredhttp://www.hongkiat.com/blog/sublime-code-snippets/http://www.hongkiat.com/blog/sublime-code-snippets/http://www.hongkiat.com/blog/scalable-vector-graphics-text/http://www.hongkiat.com/blog/scalable-vector-graphics-text/http://www.hongkiat.com/blog/css3-content-wrapping/http://www.hongkiat.com/blog/css3-content-wrapping/http://srv.buysellads.com/ads/click/x/GTND423MCYADC2JWCAALYKQWCWSDE23WCESDVZ3JCEBIK53JF6BD427KC6BDP2JYCK7IKK3EHJNCLSIZhttp://www.hongkiat.com/blog/tag/rwd/http://www.hongkiat.com/blog/tag/responsive/http://www.hongkiat.com/blog/tag/navigation/

Documents

How to Create a Responsive Navigation - Hongkiat