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
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....
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
    LVL 26

    Expert Comment

    by:David Brugge

    Author Comment

    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

    <!--- START MENU HTML -->
    <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

    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
    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:
    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

    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
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Suggested Solutions

    Title # Comments Views Activity
    PHP Get image from Excel file 12 935
    Add legend text on bottom edge of photo 7 202
    Graphics - jpeg format 3 44
    Online photography 7 86
    I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
    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…
    After watching the Introduction to GIMP this tutorial will show you additional tools to use in GIMP.
    Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now