CSS Dropdown Menu

luna · Post by **luna** » Thu 23. Sep 2004, 12:33

Meybe someone has solution about how to make this menu horizontal plz.?

pSouper · Post by **pSouper** » Thu 23. Sep 2004, 12:39

you can use NAV_ROW and create your own css for it.. look for 'sliding doors' menus ...[URL]www.alistapart.com[URL] it is very simple to implement and looks lovely with your own graphics too.

luna · Post by **luna** » Thu 23. Sep 2004, 13:22

Yeah nice looking menu but i need and submenus for all the menu, something like the vertical dropdown but in horizontal style

Carino · Post by **Carino** » Sat 25. Sep 2004, 13:33

yes, Im searching for a horizontal solution with submenus, too ;o)

Maybe this one:
http://www.emergentwebdesign.com

Thanks,

Carino

Ben · Post by **Ben** » Sat 25. Sep 2004, 16:07

For Emergent Web Design, I used ypSlideOutMenus (http://youngpup.net/2001/ypslideoutmenus. Now, there's a similar but updated solution - http://youngpup.net/2004/transmenus. The problem with these menus is that they have to be hard-coded, which is fine for some people, but takes away the ability to easily change menus with a cms - especially for our non-technical clients.

sustia · Post by **sustia** » Sat 25. Sep 2004, 18:57

Hi, maybe it's not important, but I find a problem using the menu with the Clippings.

Clippings are a nice utility to put a bookmark on a page in a web site (http://pro.html.it/articoli/id_204/idcat_11/) but it doesn't works because of this portion of code

Code: Select all

enable_menues_for_ie();

If I remove the portion of code above the clippings works properly, with the code they don't...well doesn-t works the submenus with IE..
Maybe brans can have an idea to solve this problem

brans · Post by **brans** » Sun 26. Sep 2004, 00:47

atm I really don't have no idea...

http://www.alistapart.com/articles/horizdropdowns/ the tut that I used to create my menu :-d watch it for the vertical version!

dimm · Post by **dimm** » Fri 15. Oct 2004, 02:09

you posted link is broken for now

http://files.ti-files.com/css_dropdown.zip

can u update it?

Pappnase · Post by **Pappnase** » Fri 15. Oct 2004, 04:40

hello

don't know what brans is happen

but if yomebody have download this post it me via mail! and i place the download at the docu site!

brans · Post by **brans** » Fri 15. Oct 2004, 10:23

hey pappnase mein server is abgestellt, weil ich ihn gekündigt habe, bin momentan an der UNi und habe keinen Zugriff auf meinen Heimrechner, werde mich am Weekend um das Update kümmern!

frold · Post by **frold** » Mon 29. Nov 2004, 12:38

is this project dead?

brans · Post by **brans** » Mon 29. Nov 2004, 13:27

yes ... I got no more time to continue it and Oliver mentioned that he will release a DHTML-Menu with 1.2 so I don't see any reason to continue this project by now.. as I told pappnase above I had to give up my webserver because I got a new one for free... When I sent the cancellation via email my webserver was immediately deleted and I couldn't save any file

...

As lucky as I am, I formatted my hard drive just the day before I sent the termination so I don't have the files for this project anymore...

here is all the code you need:

Source: http://www.alistapart.com/articles/dropdowns/

Code: Select all

style: horizontal

<style>

/****************** BEGIN required for menu functionality, DO NOT CHANGE! ******************/

ul.dropdown
{
    list-style: none;
    margin:0;
    padding:0;
    width:100%;
}

ul.dropdown * ul
{
    list-style: none;
    margin:0;
    padding: 0;
	display:none;
	position:absolute;
	z-index:99;
}

ul.dropdown li
{
    float:left;
    padding:2px; /* helps Opera with hover - do not remove! */
}

ul.dropdown li * li
{
    float:none;
    position: relative;     /* required? */
}

ul.dropdown ul * ul
{
    left:98%;
    top:0;
    width:100%;
}

ul.dropdown a
{
    display:block;
}


ul.dropdown ul * a
{
	width:13em;
}



ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
    display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
}

/****************** END required for menu functionality, DO NOT CHANGE! ******************/


/**************** eyecandy *****************/


body
{
    font-family:verdana;
}

ul.dropdown a
{
    background-color:#f0f0f0;
    color:#444;
    padding:4px;
    text-decoration:none;
}

ul.dropdown a:hover
{
    background-color:#444;
    color:#fff;
}

ul.dropdown ul
{
    border:1px outset;

}

ul.dropdown ul a
{
    background-color:#ccc;
    color:#000;
    padding:4px;
    text-decoration:none;
}

ul.dropdown ul a:hover
{
    background-color:#f0f0f0;
    color:#000;
}

ul.dropdown ul li
{
    background-color:#ccc;
}

</style>

Code: Select all

for vertical version

<style>
/****************** BEGIN required for menu functionality, DO NOT CHANGE! ******************/

ul.dropdown
{
    list-style: none;
    margin:0;
    padding:0;
    width:100%;
}

ul.dropdown * ul
{
    list-style: none;
    margin:0;
    padding: 0;
	display:none;
	position:absolute;
	z-index:99;
}

ul.dropdown li
{
    float:left;
    padding:2px; /* helps Opera with hover - do not remove! */
}

ul.dropdown li * li
{
    float:none;
    position: relative;     /* required? */
}

ul.dropdown ul * ul
{
    left:98%;
    top:0;
    width:100%;
}

ul.dropdown a
{
    display:block;
}


ul.dropdown ul * a
{
	width:13em;
}



ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
    display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
}

/****************** END required for menu functionality, DO NOT CHANGE! ******************/ </style>

Code: Select all

css_dropdown.js

function enable_menues_for_ie()
{
	if (document.all)
	{
        uls = document.getElementsByTagName('UL');

        for(i = 0; i < uls.length; i++)
        {
            if (uls[i].className == 'dropdown')
            {
                var lis = uls[i].getElementsByTagName('li');

                for (j = 0; j < lis.length; j++)
                {
                    if(lis[j].lastChild.tagName == 'UL')
                    {
                        lis[j].onmouseover = function() { this.lastChild.style.display = 'block'; }
                        lis[j].onmouseout = function() { this.lastChild.style.display = 'none'; }
                    }
                }
            }
        }
    }
}


window.onload = enable_menues_for_ie;

Source: OG's head and hands

Code: Select all

php code to generate the list... (without active level)

function build_dhtmlmenu($start=0, $class, $counter=0) { 
    
   $s = ''; 
   $g = ''; 
   foreach($GLOBALS['content']['struct'] as $key => $value) { 
      if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] && 
         !$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key) 
      { 
         $s .= '<li>'; 

         if(!$GLOBALS['content']['struct'][$key]["acat_redirect"]) { 
            $s .= '<a href="index.php?'; 
            if($GLOBALS['content']['struct'][$key]['acat_alias']) { 
               $s .= $GLOBALS['content']['struct'][$key]['acat_alias']; 
            } else { 
               $s .= 'id='.$key.',0,0,1,0,0'; 
            } 
            $s .= '">'; 
         } else { 
            $redirect = get_redirect_link($GLOBALS['content']['struct'][$key]["acat_redirect"], ' ', ''); 
            $s .= '<a href="'.$redirect['link'].'"'.$redirect['target'].'>'; 
         } 

         $s .= html_specialchars($GLOBALS['content']['struct'][$key]['acat_name']); 
         $s .= '</a>'; 

         $s .= build_dhtmlmenu($key, $class, $counter+1); 

         $s .= "</li>\n"; 
      } 
   } 

   if($s) { 
      $g  = "\n<ul"; 
      if(!$counter && $class) $g .= ' '.$class; 
      $g .= ">\n".$s.'</ul>'; 
   } 
    
   return $g; 
}

Code: Select all

php code to generate the list (with active level)

function build_dhtmlmenu($start=0, $class='', $activeclass='', $counter=0) { 
    
   $s = ''; 
   $g = ''; 
   foreach($GLOBALS['content']['struct'] as $key => $value) { 
      if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] && 
         !$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key) 
      { 
         $s .= '<li'; 
         if($key == $GLOBALS['aktion'][0] && $activeclass) $s .= ' '.$activeclass; 
         $s .= '>'; 

         if(!$GLOBALS['content']['struct'][$key]["acat_redirect"]) { 
            $s .= '<a href="index.php?'; 
            if($GLOBALS['content']['struct'][$key]['acat_alias']) { 
               $s .= $GLOBALS['content']['struct'][$key]['acat_alias']; 
            } else { 
               $s .= 'id='.$key.',0,0,1,0,0'; 
            } 
            $s .= '">'; 
         } else { 
            $redirect = get_redirect_link($GLOBALS['content']['struct'][$key]["acat_redirect"], ' ', ''); 
            $s .= '<a href="'.$redirect['link'].'"'.$redirect['target'].'>'; 
         } 

         $s .= html_specialchars($GLOBALS['content']['struct'][$key]['acat_name']); 
         $s .= '</a>'; 

         $s .= build_dhtmlmenu($key, $class, $counter+1); 

         $s .= "</li>\n"; 
      } 
   } 

   if($s) { 
      $g  = "\n<ul"; 
      if(!$counter && $class) $g .= ' '.$class; 
      $g .= ">\n".$s.'</ul>'; 
   } 
    
   return $g; 
}

trip · Post by **trip** » Thu 9. Dec 2004, 10:43

can anyone on this thread help me out with this

http://www.phpwcms.de/forum/viewtopic.php?p=27669

TriP

Lumimies · Post by **Lumimies** » Thu 9. Dec 2004, 10:47

http://ionrock.umemusic.com/index.php?id=5,8,0,0,1,0

Look at the bottom of the page

"Structure Nav Using Lists (no tables)"

by Ionrock

trip · Post by **trip** » Thu 9. Dec 2004, 10:55

Hi there
I think that might be the solution, I will have to look into this
thanks for the help

TriP

CSS Dropdown Menu

link error

Have you seen this?