3 Separate questions (opinions wanted)

Hey all, what the easiest way to do 1, 2 and 3...

1) http://smoothgallery.jondesign.net/ The pink flyout menu is smaller height than the parent menu.... ? How to achieve this...

2) Different a href links on the 1 page, do they all have to be in a different <p class> or what? If I wanted 1 <a href> to be bold/italic and another to be underlined and anothers font changes - all different... whats the easiest way?

3) http://www.cbg.ie/car.asp?make=BMW&modid=11772&YearRange=2002|2003&minYear=2002&maxYear=2003&VTypeID=1
How is this hover done? Is that a table row or what... how can you have separate table-like cells and hover all of them at once?

Thanks

 

I don't see a pink flyout menu anywhere.

Each type of link is assigned a class like this:

<a class="style1" href="#">Link Style 1</a>
<a class="style2" href="#">Link Style 2</a>

Code (markup):

The class specifications are written in the CSS stylesheet.

Each line is written as a container, either a div or a UL, or whatever you need to use. The link is wrapped around all the content and the background changes on hover.

 

Thanks for reply!

The top right has a menu, What, Whats New, Showcase etc.
The flyout menu there - the flyouts have a different height to the parent menu... any ideas there or examples?

thanks for the 2nd part, I didnt know class="style1" would work inside <a href>

Also part 3, how would that be done in a <ul> I can see it in a div but not a ul?

Thanks!!!

 

1. That menu on the top right is just a hover effect. You can change size and position on hover.

2. Yup, you can add a class right inside the link. Lots of ways to do this sort of thing.

3. You can write all the html inside an unordered list, but this might cause a problem with hover effects in IE6. It's probably better to use a div until IE 6 finally goes away. To see how to do this sort of thing with a UL, Google up "CSS menu list".

We commonly do these kinds of lists in ecommerce using dynamic techniques. We can break the lists into multiple columns and even multiple pages with server scripting techniques. I use HTMLscript ad the Empressa rendering engine to do the dynamic part.

Heres an example of a dynamic list built with tables:
Uline

 

You can add a class to either the a itself, or to the li, depending where you want the effect to be. Since the a is the text in this case, it's fine to give the class to it.

a is an element, like p, ul, li, img etc. I believe any element can have a class, or an id. But with menu lists, sometimes it's better to give the class to the li.

For instance, I took Stu Nichol's menu and ended up giving a class to all the submenus because they were all supposed to NOT inherit the colours, fonts, backgorund colours from the main menu. So in JonDesign's menu, if it were like my menu, the top has normal CSS styling (actually, Jon's using Js here too, but we can ignore that), but the submenu has a smaller font (all the other properties are exactly the same, black background white letters, with pink background on hover).

Because I'm only changing the font and size, I don't need a seperate class. I can just call the submenu ul li ul li.

http://stommepoes.jobva.nl/Menus/fakejon.html

This is not an example of a good menu because it's built precariously. Enlarge the font or try to move the boxes on hover, and the submenus get out of whack-- they keep inheriting things (so they'd probably need classes to not inherit things like margin-top etc).
Btw, I couldn't find the actual menu in the html (because it's hidden in Js I guess) but Jon is using both display: inline and floating left and setting width of the whole menu to 100% (of its container I guess) and then giving the li's width of 50%.

I think his menu might be more robust. But, mine still gives you an idea what kinds of things you can do.
I'm also mixing ems and px and that can also cause problems.

 

Edit, added the dumb invisible tables required by IE6 and under so that the </a> is in the place where that browser expects it-- after the list : ( So, above link now works also in IE6 and under.
If the main menus don't have an anchor, :hover won't work. Something like this is needed, or Suckerfish's Js.

 

Poes that brilliant mate - I get what you mean about whether the top menu is an overall link for its submenus are whether its just # or whatever.
Thanks mate!
Leo

 

I believe that he is using Javascript to modify the CSS code. You can get an animation effect by doing this.

 

Yeah, Foo, the Js is at least using something like a timer to slow the movement. you can move the boxes in CSS, but not as slowly. But also,I couldn't find his actual list text (though I'm blind and could have easily missed it), so maybe that is also in the JS... though he claims his stuff is Accessible and that would mean the text IS on the html page somewhere.

 

You can find the Javascript that he is using here:

http://smoothgallery.jondesign.net/assets/site/scripts/pages.js

Most of this is beyond me, but you can see the general idea of what he is doing to get the animation effects on his page. There may even be a simpler way to do this, because this seems quite complex.

I wrote some code for a page that made an image fade in and fade out when it was clicked on. You could probably modify this code to change the positioning of an element (ul, li, etc) when hovering the mouse over the element by using the 'onmouseover' to call the function. You would probably be able to get the same effect.

//*************************************************************************
//Image Popup function


	function adImage(imgID)
	{
                 globalImgID = imgID;
                 document.getElementById(globalImgID).style.visibility = "visible";
                 fadeTimer = window.setInterval("fadeIn()", 20);
	}
	
	function hideAdImage(imgID)
	{

                 globalImgID = imgID;
                 fadeTimer = window.setInterval("fadeOut()", 20);
                 //counter=0;
                 //document.bigAdImage.style.visibility = "hidden";
	}
	
	function fadeIn()
	{
                 counter = counter + .1;
                 document.getElementById(globalImgID).style.opacity = counter;
                 if (counter > 1)
                    {
                      window.clearInterval(fadeTimer);
                    }
	}
	
	function fadeOut()
	{
                 counter = counter - .1;
                 document.getElementById(globalImgID).style.opacity = counter;
                 if (counter <= 0)
                    {
                      window.clearInterval(fadeTimer);
                      document.getElementById(globalImgID).style.visibility = "hidden";
                      counter=0;
                    }
	}


//******************************************************************************
//End Image Popup Function

Code (markup):

Unfortunately, I can't show you a live example of this because it is used in a secure portion of a web site.

 

Ok ChaosFoo thanks for that!