WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Vertical Sub Menu

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Vertical Sub Menu on Wed Jun 30, 2010 7:42 pm

Unknown Data


Registered Member
Registered Member
Vertical Sub Menu
Making a vertical sub menu with CSS & JS


It's possibly to make a sub menu, but how?
Here in this tutorial, I'll do my best to learn you it.

CSS:
First we start out with the CSS. There is a lot of things to do, so keep you mind up.
Here we take a look at our style sheet, and after that we redirect it by point to point.
Code:
<style type="text/css">

/* All Styles Optional */

.suckerdiv ul{
margin-left: 1;
padding: 0;
list-style-type: none;
width: 100px;
border-bottom: 1px solid #000000;
}
   
.suckerdiv ul li{
position: relative;
}

.suckerdiv ul li ul{
position: absolute;
width: 100px;
top: 0;
visibility: hidden;
}


.suckerdiv ul li a{
display: block;
overflow: auto;
color: #000000;
text-decoration: none;
background: #FFFFFF;
padding: 2px;
border: 1px solid #000000;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: #000000;
}

.suckerdiv ul li a:hover{
background-color: #4AA8D7;
}

   
/* Holly Hack for IE */
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

This part is the default menu to be displayed.
.suckerdiv ul{
margin-left: Empty space beetwen each sub menu;
list-style-type: none;
width: The width of this default sub menupx;
border-bottom: The bottoms frame size px solid #Color code here;
}

Next part we don't have to do anything with, so just let it stay as it is.
.suckerdiv ul li{
position: relative;
}

Here we go for the popout sub menu.
.suckerdiv ul li ul{
position: absolute;
width: Width of the popout sub menupx;
top: Where to place from the top (in pixels);
visibility: hidden;
}

This part is the general info for it.
.suckerdiv ul li a{
display: block;
overflow: auto;
color: #Text color;
text-decoration: none;
background: #Background color;
padding: The padding insidepx;
border: Border sizepx solid #Border color;
border-bottom: 0;
}

The last part with also general info.
.suckerdiv ul li a:visited{
color: #Link color for visited links;
}

.suckerdiv ul li a:hover{
background-color: #Background color by mouseover;
}


/* Holly Hack for IE */
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

JavaScript:
After the CSS we put a JavaScript into our page, so the effects would be useful.
Just copy the code under here and put it your page.
Code:
<script type="text/javascript">

var menuids=["ID1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
      if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
         ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
      else //else if this is a sub level submenu (ul)
        ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
      for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
      ultags[t].style.visibility="visible"
      ultags[t].style.display="none"
      }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>

HTML:
That was quiet easy. Now we switch over to the last part, off course the HTML.
We first make these tags ready.
Code:
<div class="suckerdiv">
</div>

Between those two we put our menus, but first I'll have to have something placed in your mind.
We use "il" and "ul" tags to let the effects start. Those tags have to be placed in a correct order, to let the menu work. But first we place some ID in the top. So the code look like this now.
Code:
<div class="suckerdiv">
<ul id="ID1">
</div>

Notice; there is written a ID to this menu, it has to have the same ID as the one in the script (2. line).

Now back to the real thing. The menu start out with <ul> and ends with </ul> (not for the first time, because the ID a written there, so it looks different), that's just to indicate them, you also have to put the <il> tag in front of the link. So take a look at the code now.
Code:
<div class="suckerdiv">
<ul id="ID1">
  <li><a href="#">Sub Menu 1</a>
<ul>
</div>

We'll put some more means to pop out, by set the start "ul" tag after the link and "il" tag and put a new "ul" tag after the link and "il" tag in. Remember not to end the tag! So let us take a look now.
Code:
<div class="suckerdiv">
<ul id="ID1">
  <li><a href="#">Sub Menu 1</a>
<ul>
  <li><a href="#">Sub Menu 1.2</a>
</ul>
</div>

If we now want to make another menu start, we just and the "il" and "ul".
It will look like this.
Code:
<div class="suckerdiv">
<ul id="ID1">
  <li><a href="#">Sub Menu 1</a>
<ul>
  <li><a href="#">Sub Menu 1.2</a>
</ul>
</il>
<li><a href="#">Sub Menu 2</a>
</ul>
</div>

And then you just do the same step again and again if you want more menus.
Actually you're done now, but you might take a look at the demo.

DEMO

Note: There could be issues with Google Chrome.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://www.sjovfakta.dk

2Accespted Re: Vertical Sub Menu on Wed Jun 30, 2010 9:43 pm

Krazy


Registered Member
Registered Member
You can apply CSS effects to those correct? Like rounded corners on the boxes?

3Accespted Re: Vertical Sub Menu on Wed Jun 30, 2010 10:08 pm

Unknown Data


Registered Member
Registered Member
That's right.

http://www.sjovfakta.dk

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Vertical Sub Menu

Permissions in this forum:
You cannot reply to topics in this forum