phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

CSS Dropdown Menu

https://forum.phpwcms.org/viewtopic.php?t=3387

Page 2 of 9

Posted: Thu 23. Sep 2004, 12:33
by luna
Meybe someone has solution about how to make this menu horizontal plz.?

Posted: Thu 23. Sep 2004, 12:39
by pSouper
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.

Posted: Thu 23. Sep 2004, 13:22
by luna
Yeah nice looking menu but i need and submenus for all the menu, something like the vertical dropdown but in horizontal style :(

Posted: Sat 25. Sep 2004, 13:33
by Carino
yes, Im searching for a horizontal solution with submenus, too ;o)

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

Thanks,

Carino

Posted: Sat 25. Sep 2004, 16:07
by Ben
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.

Posted: Sat 25. Sep 2004, 18:57
by sustia
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 :)

Posted: Sun 26. Sep 2004, 00:47
by brans
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!

link error

Posted: Fri 15. Oct 2004, 02:09
by dimm
you posted link is broken for now

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

can u update it?

Posted: Fri 15. Oct 2004, 04:40
by Pappnase
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!

Posted: Fri 15. Oct 2004, 10:23
by brans
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!

Posted: Mon 29. Nov 2004, 12:38
by frold
is this project dead?

Posted: Mon 29. Nov 2004, 13:27
by brans
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; 
}

Posted: Thu 9. Dec 2004, 10:43
by trip
can anyone on this thread help me out with this

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

TriP

Have you seen this?

Posted: Thu 9. Dec 2004, 10:47
by Lumimies
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

Posted: Thu 9. Dec 2004, 10:55
by trip
Hi there
I think that might be the solution, I will have to look into this
thanks for the help

TriP
All times are UTC+01:00
Page 2 of 9

Powered by phpBB® Forum Software © phpBB Limited