Create an active css menu

Archives Yii 1.0.x Discussions
1

I would have used the mainMenu widget but I need a two-level menu system.

I have created my menu structure in main.php, but how can I make Yii highlight the active menu item?

2

Can someone please help me with this? Thanks :)

3

Um, i guess you could look at the code in the MainMenu widget…

4

I did but I have no idea what parts of the code I need to use and where to put it. My menu structure uses ul/li structure, similar to the mainMenu widget except mine is a two level menu system.

5

Anyone able to advise?

6

I might be able to help a bit, since I’m doing something like this. It uses CSS and jQuery as well as a ul structure.

This is based off of the tutorial at http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery and has had some extra jquery and styling done on it to fit my needs. This tutorial http://css-tricks.com/simple-jquery-dropdowns/ also might be useful for you. A google search for "jquery css dropdown menu", "css dropdown menu", "css menu", "jquery dropdown menu", etc, will find you more useful tutorials.

Here is my stuff.

The base path for the images is http://wwc-comic.com/, feel free to use the images I have if you want them. The icons were from a free icon kit I found on the web and the nav images are just something I whipped up quickly. If you do use them, though, please host them locally on your site and not from mine.

Here’s the CSS I am using




#admin_nav,

	#admin_nav ul

{

	margin: 0px; padding: 0px;

	list-style-type: none;

	list-style-position: outside;

	position: relative;

	line-height: 1.5em;

}


#admin_nav { z-index: 10; padding-bottom: 25px; }


#admin_nav ul { position: absolute; width: 150px; top: 24px; display: none; }

#admin_nav ul ul { top: auto; }

#admin_nav li { float: left; position: relative; padding: 0px; margin: 0px; margin-left: -2px; width: 150px; height: 25px; background-image: url(../images/nav/button-normal.jpg); background-repeat: none; }

#admin_nav li li { margin-left: 0px; }

#admin_nav li:hover { background-image: url(../images/nav/button-hover.jpg); background-repeat: none; }

#admin_nav li ul a { width: 150px; float: left; }

#admin_nav li ul span { display: block; width: 140px; }

/* left is 138px instead of 140px to offset the -2px we want for the border overlapping */

#admin_nav li ul ul { left: 138px; margin: 0px 0px 0px 10px; }

#admin_nav li.label { padding: 3px 10px; cursor: default; font-weight: bold; background-image: none; }


#admin_nav li:hover ul ul,

	#admin_nav li:hover ul ul ul,

	#admin_nav li:hover ul ul ul ul

{

	display: none;

}


#admin_nav li:hover ul,

	#admin_nav li li:hover ul,

	#admin_nav li li li:hover ul,

	#admin_nav li li li li:hover ul

{

	display: block;

}


#admin_nav a { background: none; border: none; overflow: hidden; }

#admin_nav a:link,

	#admin_nav a:active,

	#admin_nav a:visited

{

	display: block;

	width: 140px;

	height: 20px;

	padding: 0px 5px;

	color: #555;

	font-weight: bold;

	text-decoration: none;

}

#admin_nav a:hover,

	#admin_nav a.active { color: #222; }


#admin_nav span { display: block; height: 15px; padding-top: 3px; }


#admin_nav span.menu-down { background-image: url(../icon/10/131_gray.png); background-repeat: no-repeat; background-position: right 6px; }

#admin_nav a:hover span.menu-down,

	#admin_nav a.active span.menu-down { background-image: url(../icon/10/133_gray.png); }


#admin_nav span.menu-right { background-image: url(../icon/10/133_gray.png); background-repeat: no-repeat; background-position: right 6px; }

#admin_nav a:hover span.menu-right,

	#admin_nav a.active span.menu-right { background-image: url(../icon/10/131_gray.png); }

Here is my HTML




<ul id="admin_nav">

<li class="label">Admin Navigation &raquo;</li>

<li><a href="#"><span class="menu-down">News</span></a>

	<ul>

		<li><a href="#">Create</a></li>

		<li><a href="#"><span class="menu-right">Manage</span></a>

			<ul>

				<li><a href="#">News Item</a></li>

				<li><a href="#">News Item</a></li>

				<li><a href="#">News Item</a></li>

			</ul>

		</li>

		<li><a href="#"><span class="menu-right">List</span></a>

			<ul>

				<li><a href="#">News Item</a></li>

				<li><a href="#">News Item</a></li>

				<li><a href="#">News Item</a></li>

			</ul>

		</li>

	</ul>

</li>

</ul>

And here is the jQuery I use to make the states of the parent elements remain active while the children are active




<script type="text/javascript">

	$(function(){

		$('#admin_nav ul').css({display: 'none'}); // Opera Fix

		$('#admin_nav li').hover(

			function(){

				$(this).parent('ul').parent('li').find('a:first').each(function(){

					var self = $(this);

					if (!self.hasClass('active'))

						self.addClass('active');

				});

				$(this).find('ul:first').css({

					visibility: 'visible',

					display: 'none'

				}).show(400);

			},

			function(){

				$(this).find('ul:first').css({

					visibility: 'hidden'

				});

				$(this).parent('ul').parent('li').find('a:first').each(function(){

					var self = $(this);

					if (self.hasClass('active'))

						self.removeClass('active');

				});

			}

		);

	});

</script>