Page 1 of 1

Menu Direction

Posted: Wed Jan 14, 2004 4:18 pm
by Straterra
I have a menu I got from a tutorial, but it places the items to the left..What I would like is the main items under each other, and when hovered, the sub-items going to the right. Is this possible? If so, could someone help me with the modifications to this code that I currently have?

Code: Select all

<style type="text/css">

body &#123;
        font-family: arial, helvetica, serif;
&#125;

ul &#123; /* all lists */
        padding: 0;
        margin: 0;
        list-style: none;
&#125;

li &#123; /* all list items */
        float: left;
        position: relative;
        width: 10em;
&#125;

li ul &#123; /* second-level lists */
        display: none;
        position: absolute;
        top: 1em;
        left: 0;
&#125;

li>ul &#123; /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
        top: auto;
        left: auto;
&#125;

li:hover ul, li.over ul &#123; /* lists nested under hovered list items */
        display: block;
&#125;

#content &#123;
        clear: left;
&#125;

</style>

<script type="text/javascript"><!--//--><!&#1111;CDATA&#1111;//><!--
startList = function() &#123;
        if (document.all&&document.getElementById) &#123;
                navRoot = document.getElementById("nav");
                for (i=0; i<navRoot.childNodes.length; i++) &#123;
                        node = navRoot.childNodes&#1111;i];
                        if (node.nodeName=="LI") &#123;
                                node.onmouseover=function() &#123;
                                        this.className+=" over";
                                &#125;
                                node.onmouseout=function() &#123;
                                        this.className=this.className.replace(" over", "");
                                &#125;
                        &#125;
                &#125;
        &#125;
&#125;
window.onload=startList;

//--><!]]></script>

</head>

<body>

<ul id="nav">

        <li>Upload
                <ul>
                        <li><a href="">Music</a></li>
                        <li><a href="">Pictures</a></li>
                </ul>
        </li>
        <li>Forum
                <ul>
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=general">General</a></li>
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=Wars">Matches</a></li>
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=challenge">Challenge</a></li>
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=site">Website</a></li>
                </ul>
        </li>
        <li>Music
                <ul>
                        <li><a href="">Popup</a></li>
                        <li><a href="">Selector</a></li>
                        <li><a href="">List</a></li>
                </ul>
        </li>

</ul>

Posted: Wed Jan 14, 2004 7:55 pm
by Unipus
The good news is that this is a very elegant script and all the changes need to be done only in the CSS and HTML. The bad news is, to make it do what you want, I think we have to make it a little less elegant.

CSS changes:

Code: Select all

<style type="text/css"> 

body &#123; 
        font-family: arial, helvetica, serif; 
&#125; 

ul &#123; /* all lists */ 
		padding: 0;
		margin: 0;
        list-style: none; 
&#125; 

li &#123; /* all list items */ 
        width: 10em; 
&#125; 

.submenu &#123;  /* second-level menus */
		display: none;
		position: relative;
		left: 4em;
		top: -1em;
&#125;


li>ul &#123; /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ 
        top: auto; 
        left: auto; 
&#125; 

li:hover ul, li.over ul &#123; /* lists nested under hovered list items */ 
        display: block; 
&#125; 

#content &#123; 
        clear: left; 
&#125; 

</style>
You see here I've made a few changes to the ul and li definitions so that they display in a normal vertical column, rather than a row. I've also replaced 'li ul' with a new class called 'submenu', which defines the behavior for the submenus. This is, like I said, a little less elegant but necessary if you want the lists to appear aligned to the right (rather than to the right and down a bit). Doing this breaks 'submenu' out of being a child selector of 'ul' and gives you a bit more freedom to manipulate it. Of course, having done that, you need to assign each submenu to its class in the html:

Code: Select all

<ul id="nav"> 

        <li>Upload 
                <ul class="submenu"> 
                        <li><a href="">Music</a></li> 
                        <li><a href="">Pictures</a></li> 
                </ul> 
        </li> 
        <li>Forum 
                <ul class="submenu"> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=general">General</a></li> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=Wars">Matches</a></li> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=challenge">Challenge</a></li> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=site">Website</a></li> 
                </ul> 
        </li> 
        <li>Music 
                <ul class="submenu"> 
                        <li><a href="">Popup</a></li> 
                        <li><a href="">Selector</a></li> 
                        <li><a href="">List</a></li> 
                </ul> 
        </li> 

</ul>
But that's all there is to it.

Posted: Wed Jan 14, 2004 9:54 pm
by Straterra
TYVM, but there seems to be a problem...only 3 lines are showing up, and they are just plain text

http://eckclan.sytes.net/eck.html

Posted: Thu Jan 15, 2004 2:30 pm
by Unipus
Oh, well that's because you removed the javascript and the rest of the source. What I posted was just the sections that needed to be CHANGED, leave everything else in!!

Posted: Thu Jan 15, 2004 6:01 pm
by Straterra
Oh..he he he, I am a moron. I think I already deleted the rest.

Posted: Thu Jan 15, 2004 7:15 pm
by Unipus
well, it's all posted above. here's the fully corrected and compiled version. c'mon, you can do this! 8)

Code: Select all

<style type="text/css"> 

body &#123; 
        font-family: arial, helvetica, serif; 
&#125; 

ul &#123; /* all lists */ 
      padding: 0; 
      margin: 0; 
        list-style: none; 
&#125; 

li &#123; /* all list items */ 
        width: 10em; 
&#125; 

.submenu &#123;  /* second-level menus */ 
      display: none; 
      position: relative; 
      left: 4em; 
      top: -1em; 
&#125; 


li>ul &#123; /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ 
        top: auto; 
        left: auto; 
&#125; 

li:hover ul, li.over ul &#123; /* lists nested under hovered list items */ 
        display: block; 
&#125; 

#content &#123; 
        clear: left; 
&#125; 

</style> 


<script type="text/javascript"><!--//--><!&#1111;CDATA&#1111;//><!-- 
startList = function() &#123; 
        if (document.all&&document.getElementById) &#123; 
                navRoot = document.getElementById("nav"); 
                for (i=0; i<navRoot.childNodes.length; i++) &#123; 
                        node = navRoot.childNodes&#1111;i]; 
                        if (node.nodeName=="LI") &#123; 
                                node.onmouseover=function() &#123; 
                                        this.className+=" over"; 
                                &#125; 
                                node.onmouseout=function() &#123; 
                                        this.className=this.className.replace(" over", ""); 
                                &#125; 
                        &#125; 
                &#125; 
        &#125; 
&#125; 
window.onload=startList; 

//--><!]]></script> 

</head> 

<body> 

<ul id="nav"> 

        <li>Upload 
                <ul class="submenu"> 
                        <li><a href="">Music</a></li> 
                        <li><a href="">Pictures</a></li> 
                </ul> 
        </li> 
        <li>Forum 
                <ul class="submenu"> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=general">General</a></li> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=Wars">Matches</a></li> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=challenge">Challenge</a></li> 
                        <li><a href="http://eckclan.proboards19.com/index.cgi?board=site">Website</a></li> 
                </ul> 
        </li> 
        <li>Music 
                <ul class="submenu"> 
                        <li><a href="">Popup</a></li> 
                        <li><a href="">Selector</a></li> 
                        <li><a href="">List</a></li> 
                </ul> 
        </li> 

</ul>

Posted: Thu Jan 15, 2004 7:22 pm
by Straterra
Yeah, I recollected it from this post about 10 minutes ago and tested it. Thanks for your help :)...Now..perhaps you can check out my SQLite post in the Code Snippets?