Custom Menu Styles, Joomla 1.5

My Ninjas, how I have missed you!

I am working on a new site for a client and instead of doing my normal bit of custom HTML for an image menu I want to use the joomla menu system in conjunction with sliding doors this time. I've attached the mock up so you can get an idea of the ideal finish to this - worst case scenario I'll go do an image menu, but I really want to get into this.

The problem is mod_mainmenu doesn't seem to play MVC like most other things - so I've checked out JED and come up with extended menu - which seems much easier to skin than the default menu that comes with the core.

I've been looking at this as a guide, but before I get too heavy into this I wanted to ask the gurus here if there is another module/approach I could/should take.

Any help, as always, is appreciated

-Zach

24 Sep 10

Hi Zach,

You forgot the attachment... ahahahhaha!! I do this at least once a week.

-mark

24 Sep 10

Thanks Mark, it was originally wider than 800 px so the uploader refused it and I forgot to resize! Attached now.

You can see my WIP here

24 Sep 10

Problem solved.

I was totally over thinking this as usual - was a simple bit of CSS to do the trick - I've attached the html and CSS so if anyone Googles the same problem (Joomla 1.5 sliding door menu)they can get the info here.

-Zach

CSS



ul#mainlevel{

	margin: 0px;

	padding: 0px;

	list-style-type: none;

	font-size: 2.4em;

	text-decoration: none;

	

}

ul#mainlevel li{

	display: inline;

   	margin: 0;

	float: left;

	height: 57px;

	background: url('../images/img_bt_maintab-rightdoor.jpg') top right no-repeat;

}

ul#mainlevel li a{

	display: block;

	padding: .5em 2.5em;

	font-family: "vistasanreg-webfont";

	color: #A7AB61;

	text-decoration: none;

	background: url('../images/img_bt_maintab-leftdoor.jpg') top left no-repeat;

}

ul#mainlevel li a:hover{

	color: #828E9C; 

	text-decoration: none;

}

HTML (generated from list option with extended menu)



<ul  id="mainlevel">

<li><a href="#" class="mainlevel">About Fenris</a></li>

<li><a href="#" class="mainlevel">Our People</a></li>

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

</ul>

24 Sep 10

Hi Zach,

I'm glad you got it working :)

Just a tip unrelated to this specific case... if you need to change the background images as well on hover, then it is better to use mark-up like this:

<ul>

<li><a><span>blah</span></a></li>

<li><a><span>blah</span></a></li>

<li><a><span>blah</span></a></li>

</ul>

You would then apply the background images to <a> and <span> rather than <li> and <a> as in your case. The reason for this is that IE6 ignores the :hover pseudo-class on every element other than the <a> tag... so li:hover would fail in that browser. To go with the above mark-up, we would use (for the hover part):



ul li a:hover {

   background: url('../images/img_bt_maintab-rightdoor-HOVER.jpg') top right no-repeat; } 

ul li a:hover span {

   background: url('../images/img_bt_maintab-leftdoor-HOVER.jpg') top left no-repeat;}

Hope that helps. I like that design BTW.

24 Sep 10

Mark,

Thanks for the compliment - we are trying to make this a portfolio piece and that's why I'm taking no shortcuts at all for this one. Now that I have the basic code for this, I can apply it to all future sites!

I appreciate your hover advice - I now wish I had of stuck with using the default menu module - not that ext-menu isn't great - but I could have accomplished all this without the extra module install - and the default of mod_mainmenu also outputs spans like you suggested whereas the list option in extended menu does not. At least I know for next time!