KAWWA Markup Pattern Library


Navigation

Main Responsive Navigation Component Information

  • Class name: (k-navbar)
  • Version: 1.0
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

Use this component for your main site navigation.

This Component can have two levels of navigation (via a dropdown menu) and it is fully responsive.

Notice that, on the demo here below, you will see how the menu will look like depending on the size of your window.

HTML5 Plain Code

COPY
  1. <nav role="navigation">
  2. 	<p class="control"><a href="#demo" title="Click to open/close menu"><img src="./nav_control.png" alt="Menu" /></a></p>
  3. 	<h2 class="k-skip"><a href="#wrapper">Main navigation (Skip it)</a></h2>
  4. 	<ul class="k-navbar" role="menubar">
  5. 		<li class="home"><a href="index.html">Home</a></li>
  6. 		<li class="active"><strong title="Current section">Section 1</strong></li>
  7. 		<li><a href="#demo" title="Click to open/close dropdown">Section 2</a>
  8. 			<ul role="menu">
  9. 				<li><a href="#">Section 2.1</a></li>
  10. 				<li><a href="#">Section 2.2</a></li>
  11. 			</ul>
  12. 		</li>
  13. 		<li><a href="#demo">Section 3</a></li>
  14. 		<li><a href="#demo">Section 4</a></li>
  15. 		<li><a href="#demo">Section 5</a></li>
  16. 		<li><a href="#demo">Section 6</a></li>
  17. 	</ul>
  18. </nav>

CSS Code

COPY
  1. /* Navigation control */
  2. p.control {
  3. 	display: none;
  4. 	position: absolute;
  5. 	top: 5px;
  6. 	right: 3%;
  7. 	width: 45px;
  8. }
  9. 	p.control a {display: block}
  10. 
                                
  11. ul.k-navbar {padding: 0; margin: 4px 4% 2em;}
  12. 
                                
  13. 	ul.k-navbar li {
  14. 		float: left;
  15. 		width: auto;
  16. 		list-style-type: none;
  17. 		font: 1em open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  18. 		text-transform: uppercase;
  19. 		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  20. 		margin: 0 1px;
  21. 	}
  22. 
                                
  23. 		ul.k-navbar a, ul.k-navbar a:visited {
  24. 			display: block;
  25. 			text-decoration: none;
  26. 			color: #FFF;
  27. 			background: #000;
  28. 			padding: 0.5em;
  29. 		}
  30. 		ul.k-navbar a:hover, ul.k-navbar a:focus {
  31. 			color: #FFF;
  32. 			background: #808080;
  33. 		}
  34. 
                                
  35. 		/* Active section / no link */
  36. 		ul.k-navbar li.active strong {
  37. 			display: block;
  38. 			font-family: open_sansbold, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  39. 			font-weight: normal;
  40. 			text-transform: uppercase;
  41. 			color: #FFF;
  42. 			background-color: #808080;
  43. 			padding: 0.5em;
  44. 		}
  45. 
                                
  46. 		/* Active section / with link */
  47. 		ul.k-navbar li.active a, ul.k-navbar li.active a:link, ul.k-navbar li.active a:visited {
  48. 			color: #FFF;
  49. 			background-color: #808080;
  50. 		}
  51. 
                                
  52. 
                                
  53. 		/* If section has dropdown */
  54. 		ul.k-navbar a.hasdropdown, ul.k-navbar a.hasdropdown:visited {
  55. 			color: #FFF;
  56. 			background: #000 url(../img/k-theme0/bg_hasdropdown.png) right bottom no-repeat;
  57. 			padding-right: 20px;
  58. 		}
  59. 		ul.k-navbar a.hasdropdown:hover, ul.k-navbar a.hasdropdown:focus {
  60. 			color: #FFF;
  61. 			background: #808080 url(../img/k-theme0/bg_hasdropdown_on.png) right bottom no-repeat;
  62. 		}
  63. 		ul.k-navbar li.active a.hasdropdown, ul.k-navbar li.active a.hasdropdown:visited {
  64. 			color: #FFF;
  65. 			background: #808080 url(../img/k-theme0/bg_hasdropdown_on.png) right bottom no-repeat;
  66. 		}
  67. 		ul.k-navbar li.active a.hasdropdown:hover, ul.k-navbar li.active a.hasdropdown:focus {
  68. 			color: #FFF;
  69. 			background: #808080 url(../img/k-theme0/bg_hasdropdown_on.png) right bottom no-repeat;
  70. 		}
  71. 
                                
  72. 
                                
  73. /* SECOND LEVEL UL - Dropdown menu */
  74. .dropdown ul {
  75. 	display: none;
  76. 	position: absolute;
  77. 	width: 25em;
  78. 	color: #FFF;
  79. 	background: #808080;
  80. 	padding: 0;
  81. 	box-shadow: 0 2px 2px rgba(0,0,0,.5);
  82. 	z-index: 2000;
  83. }
  84. 
                                
  85. ul.k-navbar .dropdown li {
  86. 	float: none;
  87. 	padding: 0.2em;
  88. 	margin: 0;
  89. 	border-bottom: 1px dotted #FFF;
  90. 	border-right: none;
  91. }
  92. 	ul.k-navbar .dropdown li:last-child {border: none;}
  93. 
                                
  94. 	ul.k-navbar .dropdown li a, ul.k-navbar .dropdown li a:link, ul.k-navbar .dropdown li a:visited {
  95. 		display: block;
  96. 		text-decoration: none;
  97. 		color: #FFF;
  98. 		background: none;
  99. 		padding: 0.3em;
  100. 	}
  101. 
                                
  102. 	ul.k-navbar .dropdown li a:hover, ul.k-navbar .dropdown li a:focus {
  103. 		text-shadow: none;
  104. 		color: #000;
  105. 		background: #808080;
  106. 	}
  107. 	ul.k-navbar .dropdown li.active a:hover, ul.k-navbar .dropdown li.active a:focus {
  108. 		text-shadow: none;
  109. 		color: #000;
  110. 		background: #808080;
  111. 	}
  112. 
                                
  113. /* Media queries for responsive navigation -
  114. Uncomment and place declarations at the end of the CSS file -
  115. Modify max-width value to match your needs
  116. 
                                
  117. @media only screen and (max-width : 800px) {
  118. 	.sm-screen p.control {display: block;}
  119. 	.sm-screen ul.k-navbar {display: none; margin: 0; border-top: 2px solid #FFF;}
  120. 	.sm-screen .k-navbar li {float: none; clear: both; padding: 0 0 1px; }
  121. 	.sm-screen .k-navbar a {display: block;}
  122. 	.dropdown ul {position: static; width: 100%;}
  123. 	ul.k-navbar .dropdown li {padding-left: 25px;}
  124. }
  125. */
  126. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	/* Responsive Main Navigation call */
  5. 	$(document).ready(function(){
  6. 		if($.fn.flexNav) {
  7. 			$('.k-navbar').flexNav();
  8. 		}
  9. 	});
  10. })(jQuery);

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

The ReponsiveMainNav Tapestry Component will insert automatically the JavaScript code for you. You just have to define a parameter block for the items parameter, containing your items. You have also two other block parameters (skip and control), if you want to redefine the rendering of these two elements (They have a default rendering).

The Template

COPY
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
  4. 	xmlns:p="tapestry:parameter">
  5. 
                                
  6. <body>
  7. 	<nav>
  8. 
                                
  9. 	<t:kawwa2.ResponsiveMainNav>
  10. 		
  11. 		
  12. 		<p:items>
  13. 			<li class="home"><a href="#">Home</a></li>
  14. 			<li class="active"><a href="#" title="You are here">Components</a>
  15. 				<ul>
  16. 					<li><a href="#">Navigation</a></li>
  17. 					<li><a href="#">Tools</a></li>
  18. 				</ul></li>
  19. 			<li><a href="#">Documentation</a></li>
  20. 			<li><a href="#">Downloads</a></li>
  21. 		</p:items>
  22. 	</t:kawwa2.ResponsiveMainNav> 
  23. 	</nav>
  24. </body>
  25. </html>

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce