KAWWA Markup Pattern Library


Navigation

Vertical Menu Component Information

  • Class name: (k-menu)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

The vertical menu allows you to create a sophisticated three level navigation, separated by groups of main categories. It is based on the accordion component.

HTML5 Plain Code

COPY
  1. <ul class="k-menu">
  2. 	<li><a href="#" class="one-level" title="Click to fold/unfold block">Books</a></li>
  3. 	<li><a href="#" title="Click to fold/unfold block">Movies &amp; TV</a>
  4. 		<ul class="level2">
  5. 			<li><a href="#">Cinema</a>
  6. 				<ul>
  7. 					<li><a href="#">DVD</a></li>
  8. 					<li><a href="#">Blu-ray</a></li>
  9. 				</ul>
  10. 			</li>
  11. 			<li><a href="#">Tv Series</a></li>
  12. 		</ul>
  13. 	</li>
  14. 	<li><a href="#" title="Click to fold/unfold block">Multimedia</a>
  15. 		<ul class="level2">
  16. 			<li><a href="#">Desktop PCs</a></li>
  17. 			<li><a href="#">Laptops</a></li>
  18. 			<li><a href="#">Tablets</a></li>
  19. 		</ul>
  20. 	</li>
  21. 	<li><a href="#" title="Click to fold/unfold block">Music</a>
  22. 		<ul class="level2">
  23. 			<li><a href="#">New releases</a></li>
  24. 			<li><a href="#">CDs</a></li>
  25. 			<li><a href="#">MP3/MP4</a></li>
  26. 		</ul>
  27. 	</li>
  28. </ul>

CSS Code

COPY
  1. ul.k-menu {
  2. 	float: left;
  3. 	width: 100%;
  4. 	padding: 0;
  5. 	margin: 0;
  6. }
  7. 	ul.k-menu li {
  8. 		float: left;
  9. 		width: 100%;
  10. 		font-family: open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  11. 		text-transform: uppercase;
  12. 		padding: 0 0 0.5em;
  13. 		list-style-type: none;
  14. 	}
  15. 
                                
  16. 	ul.k-menu a, ul.k-menu a:link, ul.k-menu a:visited {
  17. 		display: block;
  18. 		text-decoration: none;
  19. 		color: #FFF;
  20. 		background: #808080 url(../img/k-theme0/unfold-trans.png) right 0.5em no-repeat;
  21. 		padding: 3px 28px 3px 4%;
  22. 		cursor: pointer;
  23. 	}
  24. 	ul.k-menu a:focus {
  25. 		color: #FFF;
  26. 		background: #000 url(../img/k-theme0/unfold-trans.png) right 0.5em no-repeat;
  27. 	}
  28. 	ul.k-menu a.ui-state-active, ul.k-menu a.ui-state-active:link, ul.k-menu a.ui-state-active:visited {
  29. 		color: #FFF;
  30. 		background: #000 url(../img/k-theme0/fold-trans.png) right 0.5em no-repeat;
  31. 	}
  32. 
                                
  33. 	/* If there's no sub-menu */
  34. 	ul.k-menu a.one-level, ul.k-menu a.one-level:link, ul.k-menu a.one-level:visited {
  35. 		background-image: none;
  36. 	}
  37. 	ul.k-menu a.one-level:focus {background-image: none;}
  38. 
                                
  39. 	ul.k-menu li.active a.one-level, ul.k-menu li.active a.one-level:link, ul.k-menu li.active a.one-level:visited {
  40. 		background: #000;
  41. 	}
  42. 
                                
  43. 	/* Level 2 */
  44. 	ul.k-menu ul.level2 {
  45. 		-moz-box-sizing: border-box;
  46. 		-webkit-box-sizing: border-box;
  47. 		box-sizing: border-box;
  48. 		float: left;
  49. 		width: 100%;
  50. 		padding: 0;
  51. 	}
  52. 		ul.k-menu ul.level2 li {
  53. 			width: 94%;
  54. 			font-size: 90%;
  55. 			color: #000;
  56. 			background: #FFF;
  57. 			padding: 0.5em 2% 0.5em 4%;
  58. 			border-top: 1px dashed #CCC;
  59. 		}
  60. 		ul.k-menu ul.level2 li:first-child {border: none;}
  61. 		ul.k-menu ul.level2 a, ul.k-menu ul.level2 a:link, ul.k-menu ul.level2 a:visited {
  62. 			text-decoration: none;
  63. 			color: #555;
  64. 			background: #FFF;
  65. 			padding-left: 0;
  66. 		}
  67. 		ul.k-menu ul.level2 a:hover, ul.k-menu ul.level2 a:focus {text-decoration: underline;}
  68. 
                                
  69. 			ul.k-menu ul.level2 ul li {
  70. 				list-style-type: disc;
  71. 				font: 100%/1.3 open_sansregular, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  72. 				text-transform: none;
  73. 				padding: 0;
  74. 				border: none;
  75. 			}
  76. 
                                
  77. 		/* Active section */
  78. 		ul.k-menu ul.level2 li.active a, ul.k-menu ul.level2 li.active a:link, ul.k-menu ul.level2 li.active a:visited {
  79. 			font-family: open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  80. 			text-transform: uppercase;
  81. 			color: #000;
  82. 			background: #FFF;
  83. 		}
  84. 		ul.k-menu li.active strong {
  85. 			font-family: open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  86. 			text-transform: uppercase;
  87. 			color: #000;
  88. 			background: #FFF;
  89. 		}
  90. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if($.ui && $.ui.accordion) {
  6. 			$('.k-menu').accordion({ active: false, collapsible: true });
  7. 		}
  8. 	});
  9. })(jQuery);

For more information about how to apply this plug-in, its options, events and methods, see the jQuery Accordion page.

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

Here is a very simple integration of the accordion widget. It's actually a mixin nammed "kawwa/accordion" you can apply on an "any" component. You can use the "options" parameter to pass a JSON object when initializing the tabs in order to customize the behaviour. See the official documentation to see what options you can use.
Example :
<ul t:type="any" t:mixins="kawwa/accordion" class="k-menu" accordion.options="{collapsible: true}">
...
</ul>

The Template

COPY
  1. <p class="aid"><a href="components">Back to index of components</a></p>
  2. 	<ul t:type="any"  t:mixins="kawwa2/accordion"  class="k-menu">
  3. 		<li><a href="#" class="one-level" title="Click to fold/unfold block">Books</a></li>
  4. 		<li><a href="#" title="Click to fold/unfold block">Movies &amp;amp; TV</a>
  5. 			<ul class="level2">
  6. 				<li><a href="#">Cinema</a>
  7. 					<ul>
  8. 						<li><a href="#">DVD</a></li>
  9. 						<li><a href="#">Blu-ray</a></li>
  10. 					</ul>
  11. 				</li>
  12. 				<li><a href="#">Tv Series</a></li>
  13. 			</ul>
  14. 		</li>
  15. 		<li><a href="#" title="Click to fold/unfold block">Multimedia</a>
  16. 			<ul class="level2">
  17. 				<li><a href="#">Desktop PCs</a></li>
  18. 				<li><a href="#">Laptops</a></li>
  19. 				<li><a href="#">Tablets</a></li>
  20. 			</ul>
  21. 		</li>
  22. 		<li><a href="#" title="Click to fold/unfold block">Music</a>
  23. 			<ul class="level2">
  24. 				<li><a href="#">New releases</a></li>
  25. 				<li><a href="#">CDs</a></li>
  26. 				<li><a href="#">MP3/MP4</a></li>
  27. 			</ul>
  28. 		</li>
  29. 	</ul>

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