[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


I am trying to make an over or drop down to the right of my buttons can't figure it out.

Posted on 2008-11-11
Medium Priority
Last Modified: 2012-05-05
This is an off the cuff site with dropdown from the top. I am creating drop down coming out from the right with the ability to click to a different page....http://cohenbattisti.com/orlando-criminal-defense-attorney-lawyer.htm?gclid=CL26zo6y7ZYCFQQRswodAB5IrQ
Again this is not my site, an example.  If you do not understand what I am saying I can make it clearer with your questions.
Thank y ou so much,
Question by:tkanz
  • 3
  • 2
LVL 26

Expert Comment

by:David Brugge
ID: 22936804

Author Comment

ID: 22939020
Thank you for answering, D.  This is basically what I am looking for.  Here is the right side drop down code for it.  Just have a couple of questions.  I am a little nervous about putting it in and having it work right. This guy is major pressure on me,yatta...  This is perfect for me though.  If he doesn't want the "button" look is there a way to let the buttons just be words without being boxed in this particular code?
In Dreamweaver  I can probably just manipulate colors and such from the outside and DW will write the code to attach to the rest of the pages; correct?
I will be working on this later today, If I have any more issues, may I contact you?
Again, Thank you so much

<div id="dhtmlgoodies_menu">
  <li><a href="#">New scripts</a>
      <li><a href="#">Slide out menu</a></li>
      <li><a href="#">Content organizer</a></li>
      <li><a href="#">Slide in pane</a></li>
      <li><a href="#">Chess widget</a></li>
      <li><a href="#">Color picker</a></li>
  <li><a href="#">Updated scripts</a>
      <li><a href="#">Calendar script</a></li>
      <li><a href="#">Tab menu</a></li>
      <li><a href="#">DHTML menu</a></li>
      <li><a href="#">Slide in pane</a></li>
  <li><a href="#">Support us</a>
      <li><a href="#">Link to us</a></li>
      <li><a href="#">Recommend us</a></li>
      <li><a href="#">Donate</a></li>
  <li><a href="#">Forum</a>
      <li><a href="#">Topic one</a></li>
      <li><a href="#">Topic two</a></li>
      <li><a href="#">Topic three</a></li>
  <li><a href="#">Contact us</a>
      <li><a href="#">Support</a></li>
      <li><a href="#">Feedback</a></li>
      <li><a href="#">Submit a script</a></li>
  <li><a href="#">The end(no subs)</a></li>
<!-- END MENU HTML--> 

Open in new window

LVL 26

Accepted Solution

David Brugge earned 2000 total points
ID: 22944537
Well, you are going for a simple html menu which is fine. It's a lot cleaner and easier to debug. The only thing that it doesn't have is the sliding effect. Instead, the submenus just "pop" open. Nothing wrong with that.

The way this works is you have a series of basic unordered lists <ul>. Within the <ul> and the </ul> you have your list elements <li> closed with the </li> BTW, I see that you are missing a </li> after Contact us.
Between each <li> and </li> you have your links.

If you put the html mark up into a page the way it is, you will get something like:

     * New Scripts

     * Slide out menu
     * Content organizer
     * Slide in pane

and so forth.

You then use some CSS commands to style the list. The reason that you put each link into a list element is because you can write a CSS commands that will let you apply a style to each element. For instance, you would probably put a box around each element and spread them apart so they look more like a menu. And you could put a background color on the box and center the type inside of the box.
You can write a style that will have one color background when the mouse hovers over the box and a different color background when the mouse is not over it.
That's the magic of CSS, you can write one style sheet and use it for as many or as few menus as you like. If you want to change the color, there's just one command in one place that changes all of the buttons at once.

Here are some links that will give you some starter clues on the CSS and where to put it in your markup to make it work.

Here is a list of what I think are the simplist tutorials on menus http://css.maxdesign.com.au/
Go to Listamatic, One List Many Options and start with Simple List. Then build from there. You will get what you need in a few easy steps.

If you want to cheat, google "menu generator" and you will fine sever sites that let you style the menu that you want and download the code.  Here is one of them: http://www.cssmenumaker.com/
The problem with this method is that if it doesn't work, or you want to change something, you don't know how to fix it.

It's always nicer to know what the code is doing so that you can tweak it to your liking.

If you get stuck, Experts- Exchange has a whole zone just on CSS where people jump all over this stuff with great tips and advice.

Best of luck to you.

David B

Author Closing Comment

ID: 31515536
Excellent advise and I so appreciate it. You have been such a great help to me. I will have to look at the sites though, If I have any question I will post back into experts exchange.  Again. Thank you so much and God Bless.
LVL 26

Expert Comment

by:David Brugge
ID: 22946904
Thanks for the grade. I've only got about a one year head start on you. I got very good at html using tables to put everything in place and resisted using CSS. I had a rough time at first, but after getting used to it, I find that I can't do any work without it.

I've just spent about six weeks getting my feet wet on javascript, but have to take time out now to learn about databases and php templates. I'm always coming back here to EE for advice. Sometimes I get an answer in a few minutes, other times, I end up a week without any hits. The new feature that EE has added where they send an email to top people in a zone when you haven't received an answer really helps.

Anyway, good luck to you and I'll see you around.

David B

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question