Forums (Obsolete)

Member

Armysniper89 - 8/28/2010 8:53:50 PM

Converting Design Menu to CSS Menu

I want to convert this menu designed by my designer to use a CSS Menu if possible:
User image

Here is the code though...they use an H3 for the main menu items and <UL>'s for the sub items. How can I use the CSS Menu to do this?


<div class="accordion">
	<h3><a href="#">What are my Aspirations?</a></h3>
	<div>
		<ul>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
			<li><a href="#">Clasis esse unim aptent taciti sociosqu ad litora?</a></li>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
		</ul>
	</div>
	
	<h3><a href="#">What is success, and how can it be achieved?</a></h3>
	<div>
		<ul>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
			<li><a href="#">Clasis esse unim aptent taciti sociosqu ad litora?</a></li>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
		</ul>
	</div>
	
	<h3><a href="#">What am I accountable for?</a></h3>
	<div>
		<ul>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
			<li><a href="#">Clasis esse unim aptent taciti sociosqu ad litora?</a></li>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
		</ul>
	</div>
	
	<h3><a href="#">How do I partner with Grantees?</a></h3>
	<div>
		<ul>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
			<li><a href="#">Clasis esse unim aptent taciti sociosqu ad litora?</a></li>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
		</ul>
	</div>
	
	<h3><a href="#">What will it take to get the job done? </a></h3>
	<div>
		<ul>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
			<li><a href="#">Clasis esse unim aptent taciti sociosqu ad litora?</a></li>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
		</ul>
	</div>
	
	<h3 class="accordion-last"><a href="#">Am I getting better? </a></h3>
	<div class="accordion-last">
		<ul>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
			<li><a href="#">Clasis esse unim aptent taciti sociosqu ad litora?</a></li>
			<li><a href="#">Integer id metus eget metus auctor conval?</a></li>
		</ul>
	</div>			
</div>

Kentico Developer

kentico_ondrejv - 8/30/2010 6:05:45 AM

RE:Converting Design Menu to CSS Menu

Hello,

You have multiple possibilities here. I suppose, you already have CSS and Javascript code (as well as HTML layout - shown above).

Now you can either amend those pre-defined stuff, to match our CSS List Menu layout. This would be the hardest way.

On the other hand, you can use CSS List Menu and parse its HTML code using RenderedHTML property (discussed in another thread: http://devnet.kentico.com/Forums.aspx?forumid=36&threadid=7311). Well, for upgrading and hotfixing purposes I recommend that you could clone this webpart at first.

Third possible way for this aim would be using Repeater webpart, where you can easily define HTML layout as per your needs within transformation. This approach, though, would require using where condition and custom functions to transformation to achieve the same behavior as in CSS List Menu (I mean especially active item CSS class).

Hope it helps.

Best regards
Ondrej Vasil


Member	Armysniper89 - 8/30/2010 12:40:13 PM RE:Converting Design Menu to CSS Menu Now you can either amend those pre-defined stuff, to match our CSS List Menu layout. This would be the hardest way. How would I do that exactly?

Kentico Developer

kentico_ondrejv - 9/2/2010 4:51:09 AM

RE:Converting Design Menu to CSS Menu

Hello,

What I meant was not to use h3 tag as well as div tags in your menu layout and adjusting CSS stylesheet to handle our default CSS List Menu layout. You can see default layout easily using e.g. Firebug for Firefox. Exact solution depends on your CSS implementation and it is rather question of custom development.

Best regards
Ondrej Vasil

Member

Armysniper89 - 8/31/2010 4:01:29 PM

RE:Converting Design Menu to CSS Menu

Can the CSS List Menu (or any Kentico nav control) show only the items under one parent at a time and collapse the other items? This is a two level menu that is all...

If I were to just hard code this menu and use the built in HTML and Javascript, how would I capture that an item is selected (in code) and set an item selected by calling java script? Is there an easy way to create a base page class or add it to a base page class?

Kentico Consulting

kentico_mirekr - 9/2/2010 2:30:29 AM

RE:Converting Design Menu to CSS Menu

Hi,

Yes sure, this can be achieved also with CSS List Menu navigation web part/control.
There are following web part properties which will help you:

Display only selected path:

Indicates if only selected path in the menu structure should be rendered. You can use this option if you need to render a tree menu with only single branch unfolded.

Highlight all items in path:

Indicates if all items in the currently selected path should be highlighted.

Render CSS classes:

Indicates if menu items should have CSS class names rendered.

More information about this menu navigation control can be found in following documentation:

http://devnet.kentico.com/docs/controls/cmslistmenu.htm

I hope this will help you.

Best regards,
Miroslav Remias.