[ KAWWA PORTAL ] Components : Vertical Menu

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.

Demo
Snippets
Tapestry Integration

HTML5 Plain Code

COPY

```
<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 &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>
```

CSS Code

COPY

```
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

COPY

```
(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

COPY

<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;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>
```

Top

KAWWA Markup Pattern Library

Navigation

Vertical Menu

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce