Menu styles

The template includes several styles to build the navigation menu - or anything else. They can be used several ways:

On the root element

<ul class="big-menu">
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>

For each list element

<ul>
	<li class="title-menu">Title</li>
	<li class="big-menu"><a href="#">Link</a></li>
	<li class="big-menu"><a href="#">Link</a></li>
</ul>

Both styles

<ul class="big-menu">
	<li class="title-menu">Title</li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>

Available styles

Big

• Disabled element
• Link
• Current
• Link with arrow
• 3 With count
• Link with down arrow
• Link with up arrow

<ul class="big-menu">
	<li>
		Disabled element
	</li>
	<li>
		<a href="#">Link</a>
	</li>
	<li>
		<a href="#" class="current">Current</a>
	</li>
	<li class="with-right-arrow">
		<a href="#">Link with arrow</a>
	</li>
	<li class="with-right-arrow">
		<!-- the link may be replaced by a span -->
		<span>
			<span class="list-count">3</span>
			With count
		</span>
	</li>
	<li class="with-right-arrow arrow-down">
		<a href="#">Link with down arrow</a>
	</li>
	<li class="with-right-arrow arrow-up">
		<a href="#">Link with up arrow</a>
	</li>
</ul>

For RTL version, use with-left-arrow to display the arrow.

Title

• Title element
• Title with link

<ul class="title-menu">
	<li>
		Title element
	</li>
	<li>
		<a href="#">Title with link</a>
	</li>
</ul>

Calendar

• 24 Feb 10:30 Event's description
• 24 Feb 10:30 Read-only event

<ul class="calendar-menu">
	<li>
		<a href="#" title="See event">
			<time datetime="2011-02-24"><b>24</b> Feb</time>
			<small class="green">10:30</small>
			Event's description
		</a>
	</li>
</ul>

Messages

• • Starred
  • New
  • 17:12
  • Attachment
  John Doe
  Clickable elements
• • Not starred
  • New
  • 15:47
  May Starck
  Whole message in a link
• • Not starred
  • 15:12
  May Starck
  Read-only message

<ul class="message-menu bevel-on-light-subs dark-text-bevel-subs">

	<!-- Message with clickable elements -->
	<li class="white-gradient">
		<ul class="message-status">
			<li class="starred"><a href="#" title="Starred">Starred</a></li>
			<li class="new-message"><a href="#" title="Mark as read">New</a></li>
		</ul>
		<ul class="message-info">
			<li class="blue">17:12</li>
			<li class="attach"><a href="#" title="Download attachment">Attachment</a></li>
		</ul>
		<a href="#" title="Read message">
			<strong class="blue">John Doe</strong><br>
			<strong>Clickable elements</strong>
		</a>
	</li>

	<!-- Whole message as a link -->
	<li class="white-gradient">
		<a href="#" title="Read message">
			<ul class="message-status">
				<li class="unstarred">Not starred</li>
				<li class="new-message">New</li>
			</ul>
			<ul class="message-info">
				<li class="blue">15:47</li>
			</ul>
			<strong class="blue">May Starck</strong><br>
			<strong>Whole message in a link</strong>
		</a>
	</li>

	<!-- Simple read message -->
	<li class="white-gradient">
		<ul class="message-status">
			<li class="unstarred">Not starred</li>
		</ul>
		<ul class="message-info">
			<li class="blue">15:12</li>
		</ul>
		<strong class="blue">May Starck</strong><br>
		Read message
	</li>

</ul>