neeknaam's dashboard

Once you have pasted the code and changed all the stuff you want to change you can save the page and see the menu. To make the "fly-out" parts link just open the page in edit mode again and you will see your menu with out any of the styling. When you see that you can just highlight and link the text that needs to be linked the same way you would make any links in your wiki.

Thanks, newbie, I pasted the code into a sample page and it worked great. But how do you make the items into links, where do we insert the url to link to various pages.

Ok guys this looks wonderful but what if you have got an education wiki with many tabs? I tried it in my tab but didn't work but I'm guess its because this css is made for the regular one?

I requested this too.
It would be very helpful for a group of coworkers who want to collaborate on a project or a committee. It is ideal for university settings.
One solution is to go to circleup.com, but the services there are quite limited.
I decided to make a wiki page myself with a table of names and time slots.
Then I ask everyone to color the cells of the table as green/yellow/red for available/second choice/not available.
Every subcommittee copies the table in their own page and deletes unwanted rows/nonmembers.
Then visually check for a green intersection.
It is rather cluncky and not automatic, but it will do.
It should be easy for the pros to program it.
p.s.
Committee members need to alert the committee chair if they change their available times.

Thanks.
That was quite a bit of work on your part.
I am sure many users will benefit from your post.
I know I will.

okay that didn't work. You can snag the code from one of my wikis here:
http://newbiedesignwiki.pbwiki.com/CS...

okay that didn't go as planned the two div tags at the top of the lists need to look like this

<div>
<div>

I hope this works?!

If it doesn't I will stick it on a wiki somewhere and post a link</div></div>

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: