SideBar as a dropdown menu or tab

I have built a fly-out, drop-down menu in the sidebar before. It uses only css I can try to find it and post it for you if you would like. Just let me know

Thanks. That would be nice. I have not programmed in CSS before but perhaps I can begin to learn.

neeknaam I found the css I was looking for I just need to know where you want your sidebar? If you want a drop-down menu I would suggest moving the sidebar directly under your wiki header (where the name is) but if you want a fly-out I would suggest moving the sidebar to the left. Just let me know and I will incorporate all of the css that you need to do that so all you have to do is plug in the css and change the words for what you want. I will also explain how to do that. Just let me know.

Thanks.
I thought the sidebar on top of its current place would be good (so that users can look at the page which is usually/mostly on the left and decide which link they want to follow on the right.)

okay this is gonna be a long post. Take a deep breathe relax and here we go.

I tried to make this fly-out menu liquid but I just didn't have any luck. You will have to change the size and placement of things once you plug in the words and links you want to use if the menu looks a little silly flying-out in different places. I used a tame color scheme but I marked the places where you can change the colors. Knowing a little CSS will help but if you have any question feel free to just post back and I will help you get the menu up and running. I tried to mark it up well so you could make changes and feel confident that you knew what they would do.

Now, this is how you need to install the menu. Open up your sidebar in edit mode. Click the button at the top that is labled "Source" once you are in this view put your cursor at the very first thing on your page. After that press the enter key a few times to get some white space. Once you have that space copy and paste the following:

<style type="text/css">
/*this container is what allows the menu to float to the right*/
#MenuContainer {
width:75%;
}

/*this makes the menu appear right if you ever want it to appear left*/
/*change it to --float:left;-- but keep in mind you will have to move the appearing lists over to the right*/
/*or they will appear on top of the menu or somwhere out in space*/
#Vmenu {
float:right;
}

/*this is what contorls the unordered list that makes up the things you hover over to get the fly-out menu to appear*/
#Vmenu ul {
margin:0 0 0 0;
padding:0 0 0 0;
position:relative;
width:auto;
background-color:#888866;/*this is the greenish color*/
}

/*this is the style for the items that make up the list to be hovered over and here is where you will change the light green border*/
/*that is around every word on the "roll-over" part of the menu*/
#Vmenu ul li {
margin:0;
padding:7px;
width:auto;
list-style-type: none;
border:2px outset #AABB99;/*light greenish border that surrounds each item in the list*/
background-image:none;
}

/*this is what controls the style of the list that flys-out once the first list is hovered over*/
#Vmenu ul ul{
margin-top:-32%;/*change this if you need the fly-out list to be moved up or down*/
margin-left:-115%;/*change this if you need the fly-out list to be moved*/
padding:0 0 0 0;
position:absolute;
display:none;
text-align:left;
width:100%;
background-color:#CC9966;/*this is the reddish color of the fly-out menu*/
border:2px outset #7788AA;/*this is the bluish color that is around the entire fly-out menu*/
}

/*this controls the style of the list items in the fly-out menu*/
#Vmenu li ul li {
margin:0 0 0 0;
padding-top:0 0 0 0;
border:none;
border-bottom:1px solid #DDBB88;/*this is the light reddish color I used to seperate the items in the fly-out menu*/
}

#Vmenu ul li:hover ul {
display:block;
}

</style>

after you have pasted all of that into your wiki page go ahead and press the enter key a few more times and then paste this in:

<div>
<div>

• Home


• Contact Us
  
  
  
  • Address
  
  
  • Phone Numbers
  
  
  • E-Mail
  
  
  
  


• About Us
  
  
  
  • Services
  
  
  • Products
  
  
  • Support Specialists
  
  
  
  


• Profile
  
  
  
  • Edit Profile
  
  
  • Logout
  
  
  
  

</div>
</div>

Here is where you will make all of the changes to the wording. Just replace the words with what works for you. Also if you need more than just three items just add another list item after this: