5 replies to this topic

[jlhaslip]

moldboy, on Nov 18 2005, 03:23 PM, said:

...  I am wondering if you have a particular site in mind that would show how?

Hate to add this to a topic about unordered lists, but here goes. Maybe this part will get split into its own topic later. I'll ask another mod how to do that. ( new guy comment)

My Webpage, or click on the bottom link of my signature to go to the same site which has css rollover effects.
This isn't the exact code that performs the rollover on that site, but is from another (handier to acquire) html page on my computer.

a:link, a:visited {
  background-color: #ffffff;
  color: #66ff66;
  font-weight: bold;
  }
a:hover	{
  background-color: #66ff66;
  color: #ffffff;
  }

Notice that the back-ground-color and the foreground colours get switched on rollover?
It is that simple. Also, the font-weight is inherited by the on-hover state, because I don't specify any change in font-weight. The "cascade" does that for you.

Hope this helps

[moldboy]

Quote

Hate to add this to a topic about unordered lists, but here goes.

That's what I was thinking when I wrote the post but, oh well. The code you just demonstrated would give a rollover link(I think), I was thinking something more along the lines of a menu. The kind that drops down on rollover

[Tyssen]

If you want a good site with tutorials on how to create horizontal and vertical menus using lists, check out Listamatic.

[Lozbo]

There is a simple rule that will get your list done as you want (a drop down on roll over).

It is the simplest code, its as simple you would never have thought it! It is really cool, the only problem with it (yeah, it has a little problem, but as you must be figuring it out, its all about that hated non-standars-compliant nasty browser which happens to be, by the way, the most used browser around hehe).

But dont panic, it all solves with a little javascript (lets hope users allow js do the magic).

Well the trick is basically about this: you do your xhtml markup of lists, and sublists, so you will have something like this (ill borrow the code of a page im developing):

<ul id="menu_nav">
    <li><a href="/pmic/presentacion.php" accesskey="N">Presentaci&oacute;n</a>
      <ul>

        <li><a href="/pmic/misionvision.php">Misi&oacute;n y Visi&oacute;n</a></li>
        <li><a href="/pmic/objetivos.php">Objetivos</a></li>
        <li><a href="/pmic/metas.php">Metas</a></li>
      </ul>
    </li>
    <li><a href="/pmic/pmic/" accesskey="P">PMIC</a>

      <ul>
        <li><a href="javascript:;">Materiales</a></li>
        <li><a href="javascript:;">Chapala</a></li>
        <li><a href="javascript:;">Arcediano</a></li>
        <li><a href="javascript:;">Humor</a></li>
        <li><a href="javascript:;">Fotos</a></li>

        <li><a href="javascript:;">Notichapala</a></li>
        <li><a href="javascript:;">Staff</a></li>
        <li><a href="javascript:;">Eventos y Actividades</a></li>
        <li><a href="javascript:;">P&aacute;ginas Relevantes </a></li>
      </ul>
    </li>

    <li><a href="/pmic/excit.php" accesskey="E">Excit</a></li>
    <li><a href="/pmic/claseEA/" accesskey="C">Clase de Econom&iacute;a Ambiental </a>
      <ul>
        <li><a href="javascript:;">Programa Acad&eacute;mico</a></li>
        <li><a href="javascript:;">Pizarra de Mensajes</a></li>
        <li><a href="javascript:;">Materiales de Lectura </a></li>

      </ul>
    </li>
    <li><a href="/pmic/investigadores/" accesskey="R">Red de Investigadores</a>
      <ul>
        <li><a href="javascript:;">Investigadores</a></li>
        <li><a href="javascript:;">Proyectos</a></li>
      </ul>

    </li>
    <li><a href="/pmic/publicaciones.php" accesskey="U">Publicaciones</a></li>
</ul>

And the glorious, yet as simple as hell css is all about this:

hide the sub lists with display: none and show it again with :hover. However, the problem with IE consists that the pseudo class :hover is only supported for anchors, and what we are using is a li:hover pseudo class so will have to fix it with another code.

the basic code will be something like this:

li ul {display:none}
li:hover ul {display:block}

That's it. You tell the ul child of the list item to keep hidden, and then you tell that ul (on the rollover of the li) to show. A more fancy css code (whill i'll also borrow from my other site) will be like this:

div#main_menu  	{width:200px;background:#0b3a6a;color:white;font-size:.9em;float:left;text-align:left;clear:both;}
div#main_menu p  	{margin:0;padding:10px;font-size:1em;background:#74a7cd;text-align:center;}
div#main_menu ul  {margin: 0;padding: 0;list-style:none;width: 200px;vertical-align:top;}
div#main_menu ul li  {position: relative;}
div#main_menu li ul  {position:absolute;left:200px;top:0;display: none;}/* quitar absolute para otro tipo de men� */
div#main_menu ul li a	{display: block;text-decoration: none;background:#0b3a6a;color:white;padding:5px 0 5px 5px;
        /*border: 1px solid #ccc;border-bottom: 0;*/}
div#main_menu ul li a:hover{color:white;background:#11589F;border-right:5px solid #BF0D0D;padding-left:10px;}
/* Fix IE. Hide from IE Mac \*/
* html #main_menu ul li  {float: left; height:1%;}
* html #main_menu ul li a  {height: 1%;}
/* End */
div#main_menu li:hover ul, #main_menu li.sfhover ul  {display: block;}
div#main_menu li ul li a    	{padding: 2px 5px;border-bottom:1px solid #28516F;}

That's it, it comes with IE fix hacks and everything hehe. Note that the markup the main ul had an id? its for the js fix. You can change it but youll have to do it in the javascript.

The code i posted, the css, its an already formatted horizontal menu with dropdowns on the right, got it from a tutorial on alistapart and its valid xhtml and css. This is the IE JS FIX:

sfHover = function() {
	var sfEls = document.getElementById("menu_nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  	this.className+=" sfhover";
  }
  sfEls[i].onmouseout=function() {
  	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Hope this worx for ya.

[Tyssen]

You've gone one step further there Lozbo in that you're talking about list menus with dropdown list menus. Of course you can create a list menu without it having an attached dropdown.
As for the javascript for IE thing, there is an alternative: whatever:hover which does for :hover in IE what all other modern browsers do by default.

[Lozbo]

moldboy, on Nov 18 2005, 05:21 PM, said:

That's what I was thinking when I wrote the post but, oh well.  The code you just demonstrated would give a rollover link(I think), I was thinking something more along the lines of a menu.  The kind that drops down on rollover

Yeah thanks for that page tyssen! i have not read it all but i think that will make :hover life easier right? and i think moldboy wanted to know a little bit about dropdowns...