You are here: Re: Adding an additional submenu to a collapsible/expandable menu « HTML « IT news, forums, messages
Re: Adding an additional submenu to a collapsible/expandable menu

Posted by Jonathan on 01/05/07 21:15

Jonathan,

Is there anything special that I need to do to view your example? I
saved your code (as an new html file) and attempted to view it to no
avail. What would you suggest me to do to view your example. Thanks
for your assistance.

Jonathan

Jonathan N. Little wrote:
> Toby Inkster wrote:
> > Jonathan wrote:
> >
> >> Currently the code below allows the users to the drill down one level,
> >> but I want it to be able to drill down an additional level. Any help
> >> would be much appreciated.
> >
> > This looks startlingly like an old script of mine.
> >
> > I've not tried it with three nav levels, but I *believe* the key is to
> > replace this:
> >
> > subs = menu.childNodes();
> >
> > with this:
> >
> > subs = menu.getElementsByTagName('LI');
> >
>
> I did up a demo for someone here recently that is a little more modern
> for attaching the events and degrades to a fully expanded list if
> JavaScript is disabled
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>template</title>
> <style type="text/css">
> #sm1,#sm2,#sm3 {
> display: block;
> }
> </style>
>
> <script type="text/javascript">
> var buf='<style type="text/css">#sm1, #sm2, #sm3 { display: none;
> }</style>';
> document.write(buf);
> </script>
>
> <script type="text/javascript">
>
> var menus=new Array('m1', 'm2', 'm3');
>
> function toggle(e){
> var me;
> if(!e) var e=window.event;
> if(e.target) me=e.target; // W3C
> else if(e.srcElement) me=e.srcElement; // MSIE
> if(me.nodeType == 3) me=me.parentNode; // Safari bug on elements
> with TEXT
>
> var id='s' + me.id;
> var submenu=document.getElementById(id);
> me.flag =! me.flag;
> if(me.flag) submenu.style.display="block";
> else submenu.style.display="none";
> }
>
> function initMenus(){
> for( var i=0; i<menus.length; i++){
> var menu=document.getElementById(menus[i]);
>
> //alert('Init ' + menus[i] + ' which is ' + menu.tagName );
>
> menu.flag=false;
>
> if(menu.addEventListener){
> menu.addEventListener('click', toggle, false);
> }
> else if(menu.attachEvent){ //MS IE support
> menu.attachEvent('onclick', toggle);
> }
> }
> }
>
> // attach event after page loads
> if( window.addEventListener ) {
> window.addEventListener('load',initMenus,false); //legacy
> } else if( document.addEventListener ) {
> document.addEventListener('load',initMenus,false); //proper
> } else if( window.attachEvent ) {
> window.attachEvent("onload", initMenus); //IE only
> }
>
> </script>
>
> </head>
> <body>
>
> <ul>
> <li><a href="#" id="m1">Menu 1</a>
> <ul id="sm1">
> <li>Submenu 1.1</li>
> <li>Submenu 1.2</li>
> <li>Submenu 1.3</li>
> </ul>
> </li>
> <li><a href="#" id="m2">Menu 2</a>
> <ul id="sm2">
> <li>Submenu 2.1</li>
> <li>Submenu 2.2</li>
> <li>Submenu 2.3</li>
> <li>Submenu 2.4</li>
> </ul>
> </li>
> <li><a href="#" id="m3">Menu 3</a>
> <ul id="sm3">
> <li>Submenu 3.1</li>
> <li>Submenu 3.2</li>
> </ul>
> </li>
> <ul>
>
> </body>
> </html>
>
> --
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIO
> http://www.LittleWorksStudio.com

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация