Navigation
Vertical Menu 
- Class name: (k-menu)
- Version: 1.1
-
jQuery Interactive feature
-
Tapestry Integration
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
-
<ul class="k-menu">
-
<li><a href="#" class="one-level" title="Click to fold/unfold block">Books</a></li>
-
<li><a href="#" title="Click to fold/unfold block">Movies & TV</a>
-
<ul class="level2">
-
<li><a href="#">Cinema</a>
-
<ul>
-
<li><a href="#">DVD</a></li>
-
<li><a href="#">Blu-ray</a></li>
-
</ul>
-
</li>
-
<li><a href="#">Tv Series</a></li>
-
</ul>
-
</li>
-
<li><a href="#" title="Click to fold/unfold block">Multimedia</a>
-
<ul class="level2">
-
<li><a href="#">Desktop PCs</a></li>
-
<li><a href="#">Laptops</a></li>
-
<li><a href="#">Tablets</a></li>
-
</ul>
-
</li>
-
<li><a href="#" title="Click to fold/unfold block">Music</a>
-
<ul class="level2">
-
<li><a href="#">New releases</a></li>
-
<li><a href="#">CDs</a></li>
-
<li><a href="#">MP3/MP4</a></li>
-
</ul>
-
</li>
-
</ul>
CSS Code
-
ul.k-menu {
-
float: left;
-
width: 100%;
-
padding: 0;
-
margin: 0;
-
}
-
ul.k-menu li {
-
float: left;
-
width: 100%;
-
font-family: open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-transform: uppercase;
-
padding: 0 0 0.5em;
-
list-style-type: none;
-
}
-
ul.k-menu a, ul.k-menu a:link, ul.k-menu a:visited {
-
display: block;
-
text-decoration: none;
-
color: #FFF;
-
background: #808080 url(../img/k-theme0/unfold-trans.png) right 0.5em no-repeat;
-
padding: 3px 28px 3px 4%;
-
cursor: pointer;
-
}
-
ul.k-menu a:focus {
-
color: #FFF;
-
background: #000 url(../img/k-theme0/unfold-trans.png) right 0.5em no-repeat;
-
}
-
ul.k-menu a.ui-state-active, ul.k-menu a.ui-state-active:link, ul.k-menu a.ui-state-active:visited {
-
color: #FFF;
-
background: #000 url(../img/k-theme0/fold-trans.png) right 0.5em no-repeat;
-
}
-
/* If there's no sub-menu */
-
ul.k-menu a.one-level, ul.k-menu a.one-level:link, ul.k-menu a.one-level:visited {
-
background-image: none;
-
}
-
ul.k-menu a.one-level:focus {background-image: none;}
-
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 {
-
background: #000;
-
}
-
/* Level 2 */
-
ul.k-menu ul.level2 {
-
-moz-box-sizing: border-box;
-
-webkit-box-sizing: border-box;
-
box-sizing: border-box;
-
float: left;
-
width: 100%;
-
padding: 0;
-
}
-
ul.k-menu ul.level2 li {
-
width: 94%;
-
font-size: 90%;
-
color: #000;
-
background: #FFF;
-
padding: 0.5em 2% 0.5em 4%;
-
border-top: 1px dashed #CCC;
-
}
-
ul.k-menu ul.level2 li:first-child {border: none;}
-
ul.k-menu ul.level2 a, ul.k-menu ul.level2 a:link, ul.k-menu ul.level2 a:visited {
-
text-decoration: none;
-
color: #555;
-
background: #FFF;
-
padding-left: 0;
-
}
-
ul.k-menu ul.level2 a:hover, ul.k-menu ul.level2 a:focus {text-decoration: underline;}
-
ul.k-menu ul.level2 ul li {
-
list-style-type: disc;
-
font: 100%/1.3 open_sansregular, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-transform: none;
-
padding: 0;
-
border: none;
-
}
-
/* Active section */
-
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 {
-
font-family: open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-transform: uppercase;
-
color: #000;
-
background: #FFF;
-
}
-
ul.k-menu li.active strong {
-
font-family: open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
text-transform: uppercase;
-
color: #000;
-
background: #FFF;
-
}
How to apply
-
(function($){
-
'use strict';
-
$(document).ready(function(){
-
if($.ui && $.ui.accordion) {
-
$('.k-menu').accordion({ active: false, collapsible: true });
-
}
-
});
-
})(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
-
<p class="aid"><a href="components">Back to index of components</a></p>
-
<ul t:type="any" t:mixins="kawwa2/accordion" class="k-menu">
-
<li><a href="#" class="one-level" title="Click to fold/unfold block">Books</a></li>
-
<li><a href="#" title="Click to fold/unfold block">Movies &amp; TV</a>
-
<ul class="level2">
-
<li><a href="#">Cinema</a>
-
<ul>
-
<li><a href="#">DVD</a></li>
-
<li><a href="#">Blu-ray</a></li>
-
</ul>
-
</li>
-
<li><a href="#">Tv Series</a></li>
-
</ul>
-
</li>
-
<li><a href="#" title="Click to fold/unfold block">Multimedia</a>
-
<ul class="level2">
-
<li><a href="#">Desktop PCs</a></li>
-
<li><a href="#">Laptops</a></li>
-
<li><a href="#">Tablets</a></li>
-
</ul>
-
</li>
-
<li><a href="#" title="Click to fold/unfold block">Music</a>
-
<ul class="level2">
-
<li><a href="#">New releases</a></li>
-
<li><a href="#">CDs</a></li>
-
<li><a href="#">MP3/MP4</a></li>
-
</ul>
-
</li>
-
</ul>