Forums (Obsolete)

Member

1228 - 9/8/2010 8:23:47 AM

How to highlight active page in a masterpage menu?

Hi,

I have the following masterpage template in my Kentico site:

<div id="container">
	<cc1:CMSWebPartZone ID="zoneTop" runat="server" />
    	<div id="wrapper">
		<div id="header">
			<ul>
			<li class="home"><a href="home.aspx">home</a></li>
			<li class="contact"><a href="contact.aspx">contact</a></li>
                	<li class="products"><a href="products.aspx">products</a></li>
                	<li class="services"><a href="services.aspx">services</a></li>
			</ul>
		</div>

		<div id="content1">
			<cc1:CMSWebPartZone ID="zoneContent" runat="server" />
		</div>
		<div id="footer">
			<cc1:CMSWebPartZone ID="zoneBottom" runat="server" />
		</div>
	</div>
</div>

and the css in a stylesheet:

#header {
	display:block;
	overflow:hidden;
	width:960px;
	height:174px;
	background:url(logo01.png) no-repeat -2px 14px;
}

#header ul {
	display:block;
	overflow:hidden;
	float:right;
	width:625px;
	height:38px;
}

#header ul li {
	display:block;
	overflow:hidden;
	float:right;
	margin-left:2px;
}

#header ul li.home a {
	display:block;
	overflow:hidden;
	background:url(nav_home.png) no-repeat;
	width:69px;
	height:38px;
	text-indent:-900px;
}

#header ul li.home2 a {
	display:block;
	overflow:hidden;
	background:url(nav_homeH.png) no-repeat;
	width:69px;
	height:38px;
	text-indent:-900px;
}


#header ul li.home a:hover, #header ul li.home a:active {
	background:url(nav_homeH.png) no-repeat;
}

#header ul li.services a {
	display:block;
	overflow:hidden;
	background:url(nav_services.png) no-repeat;
	width:83px;
	height:38px;
	text-indent:-900px;
}

#header ul li.services a:hover, #header ul li.services a:active {
	background:url(nav_servicesH.png) no-repeat;
}

#header ul li.products a {
	display:block;
	overflow:hidden;
	background:url(nav_products.png) no-repeat;
	width:87px;
	height:38px;
	text-indent:-900px;
}

#header ul li.products a:hover, #header ul li.products a:active {
	background:url(nav_productsH.png) no-repeat;
}

#header ul li.contact a {
	display:block;
	overflow:hidden;
	background:url(nav_contact.png) no-repeat;
	width:82px;
	height:38px;
	text-indent:-900px;
}

#header ul li.contact a:hover, #header ul li.contact a:active {
	background:url(nav_contactH.png) no-repeat;
}

#header ul li.contact2 a {
	display:block;
	overflow:hidden;
	background:url(nav_contactH.png) no-repeat;
	width:82px;
	height:38px;
	text-indent:-900px;
}

The stylesheet and html menu is taken from our .html mockup and when a user clicks on a mneu item and is taken to another page that menu item gets highlighted. How do I achieve this when I now will use a masterpage in Kentico? The menu looks fine but the menu items (obviously) doesn't get highlighted when active.

How do I easiest covert my code to a menu I can use in Kentico?

Thanks in advance.

Member

gavin.eggheaddesign - 9/8/2010 8:47:54 AM

RE:How to highlight active page in a masterpage menu?

Hi

You could make the navigation region a CSS list menu webpart (if you wish to use ul li structure) which will dynamically build your navigation based on what pages are set-up/pointed at.

From here you can assign an active CSS class for each page under there respective properties within the CMSDesk.

Hope this helps

Thanks


Member	1228 - 9/8/2010 9:04:15 AM RE:How to highlight active page in a masterpage menu? Hi Gavin, Thanks for that. I added the web part and get a vertical list without any styling of the pages I have. How do I edit the styling of the whole menu, to make it horizontal etc (like I do with the <div id="header">) in my first post?

Member

gavin.eggheaddesign - 9/8/2010 9:27:54 AM

RE:How to highlight active page in a masterpage menu?

Hi

So at present I am assuming you have the <div class="header"> then the webpart is building the ul li navigation inside it?

To pick up all the original styling that your CSS had you would again need to apply the separate class names to the relevant pages within the CMS via 'page name' > Properties tab > 'Menu' in left nav. So 'Menu item CSS class' would be 'home' for the homepage and 'contact' for the Contact us page.

This sits above the section i was referring to in my last post called 'Menu item design - highlighted' where you can assign specific class names for a active page.

Thanks

Member

1228 - 9/8/2010 6:39:36 PM

RE:How to highlight active page in a masterpage menu?

Hi,

So I have my pages and a master page (the one in my first post where the current menu is created). Now I want to create a new menu in Kentico that looks the same (a horizontal menu) but gives me the active menu item highlighted.

So first step is to add a css list menu web part in my master page. When I configure the web part I just added I click on Content -> Path -> select my master page and click select (path now looks like /%). I now get a vertical list without any formatting of my pages.

Am I doing it right so far?

Then I click on my Home page -> properties -> menu and type home in the Menu Item CSS class right?

The home link still stays unformatted so I don't know what I am doing wrong.

Is there any good documentation, examples or tutorials on how to do this?

Thanks.

Member

1228 - 9/8/2010 6:43:52 PM

RE:How to highlight active page in a masterpage menu?

Ok I got it now, have to alter my stylesheet a bit
from
#header ul li.home a {
display:block;
overflow:hidden;
background:url(nav_home.png) no-repeat;
width:69px;
height:38px;
text-indent:-900px;
}

to
.home a {
display:block;
overflow:hidden;
background:url(nav_home.png) no-repeat;
width:69px;
height:38px;
text-indent:-900px;
}

and so on

Member

1228 - 9/8/2010 7:04:57 PM

RE:How to highlight active page in a masterpage menu?

I don't get it to be a horizontal list though

I tried with
#menuElem ul {
display:block !important;
overflow:hidden !important;
float:right !important;
width:625px !important;
height:38px !important;
margin-top: 0px !important;
}

#menuElem ul li {
display:block !important;
overflow:hidden !important;
float:right !important;
margin-left:2px !important;
}

but it doesn't work, where can I change the default style of #menuElem?


Member	1228 - 9/8/2010 7:07:22 PM RE:How to highlight active page in a masterpage menu? Alright so I have to type ul#menuElem and ul#menuElem li instead


Member	1228 - 9/8/2010 7:09:10 PM RE:How to highlight active page in a masterpage menu? now the menu items are reversed though, the home link is last in the list and so on (should be first). How do I fix this?


Member	1228 - 9/8/2010 8:44:03 PM RE:How to highlight active page in a masterpage menu? So I reversed the list in the Content Management window, i.e. I moved Home to the bottom of the list and so on. Case closed.

Member

gavin.eggheaddesign - 9/9/2010 3:14:49 AM

RE:How to highlight active page in a masterpage menu?

You been busy! From what i can make out you have it all there except the ordering (should not need to rotate the page list in the CMSDesk).

From what i can make out: -

#menuElem ul li {
display:block !important;
overflow:hidden !important;
float:right !important;
margin-left:2px !important;
}

You are targeting the list-items but floating them, try hiding this and instead do 'display: inline;' for firefox and inline-block for IE so...

body.Gecko3 #menuElem ul li {
display: inline !important;
overflow:hidden !important;
/*float:right !important;*/
margin-left:2px !important;
}
body.IE6 #menuElem ul li,
body.IE7 #menuElem ul li,
body.IE8 #menuElem ul li {
display: inline-block !important;
overflow:hidden !important;
/*float:right !important;*/
margin-left:2px !important;
}

Not too sure why #header ul li.home a did not work although without seeing the site it is abit more difficult to find a fix - hopefully this will help. On a separate note would suggest dropping the !important tags where possible just for cleaner CSS and avoiding any issue's as you continue to build the website.

Thanks


Kentico Support	kentico_zdenekc - 9/23/2010 7:57:30 PM RE:How to highlight active page in a masterpage menu? Hi guys, Thank you for interesting hints and discussion. Regards, Zdenek