Advanced Search

Results 1 to 7 of 7

Thread: Trying to incorporate a drop down menu in an already designed web site

  1. #1
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Trying to incorporate a drop down menu in an already designed web site

    Hi all

    First post of many no doubt lol ...

    im new here ive done a fair bit of basic web design but i now need to put a drop down menu in the navigation bar of my web site.

    but i cant figure out where to start ... ive tried the online tutorials but dont seem to help with my already existing web site ...

    Can anyone help???

    Thanks

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Provide a link to your site so we can see what sort of menu would be best suited to it. Do you want a horizontal or vertical drop down menu?

  3. #3
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Did you take a look at the DD ones?

    Menu and Navigation Scripts: http://www.dynamicdrive.com/dynamicindex1/index.html

    CSS Menus: http://www.dynamicdrive.com/style/csslibrary/category/C1/
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  4. #4
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply

    website is

    www.diypartyhire.co.uk

    its a basic design that we use for showing hire equipment - only just been done so there are still some issues that im working out, but we didnt think we would need too many pages hence why we didnt put drop down menus on.

  5. #5
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Ok, well since you say you're not very experienced this is probably a good choice: http://www.dynamicdrive.com/dynamici...anylinkcss.htm

    It's a very simple drop down menu, which you can customise to your needs, and it's pure CSS so it shouldn't be too hard for you to implement, just say if you need more help.

    It is mostly explained on the page I have linked to though.

    Hope this helps,


    Jack.

  6. #6
    Join Date
    Dec 2008
    Posts
    20
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the links that is the kind of thing that i want

    the problem comes when i try and insert the code into the page that i already have - i never know which bits to overwrite.

    any chance some one could get my source code and just add the menu code to it so i can see where i need to place it?

    i know im a pain im just at a loss with this at the moment and its doing my head in lol

  7. #7
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    You'll have to experiment with the page a bit, so you can comment out by using <!-- --> around the menu you currently have and replace it with the following after the <body>

    Code:
    <!--1st anchor link and menu -->
    
    <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Anchor Link</a>   
                                                        
    <div id="anylinkmenu1" class="anylinkcss">
    
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    <a href="http://www.codingforums.com">Coding Forums</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    
    </div>
    
    <!--2nd anchor link and menu -->
    
     <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Anchor Link 2</a>   
                                                        
    <div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow">
    
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    <a href="http://www.google.com">Google</a>
    <a href="http://news.bbc.co.uk">BBC News</a>
    
    </div>
    And then put this between the <head> tag:

    Code:
    <link rel="stylesheet" type="text/css" href="anylink.css" />
    
    <script type="text/javascript" src="anylink.js">
    
    /***********************************************
    * AnyLink CSS Menu script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    Make sure you save the .css and .js files from the page I linked to earlier, and then from there you should be able to play around with the CSS, adding background-color, borders, etc etc, to get the effect you want.

    Edit: Here's more specific code - Go to this part of your code:

    Code:
    <div id="menu"> 
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="lighting.htm">Lighting</a> </li>
        <li><a href="sound.htm">Sound </a></li>
        <li><a href="effects.htm">Effects</a></li>
    
        <li><a href="packages.htm">Packages</a></li>
        <li><a href="terms.htm">Terms</a></li>
        <li><a href="contact.htm">Contact</a></li>
        <li></li>
      </ul>
    </div>
    <!-- end #menu -->
    And then edit it like this:

    Code:
    <li><a href="sound.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'soundmenu')">Sound</a></li>
    Now that's done, change the "soundmenu" div:

    Code:
    <div id="soundmenu" class="anylinkcss">
    
    <a href="#">Your Drop Down Link HERE</a>
    </a>
    
    </div>
    From that, you should be able to edit the rest of the links in the same sort of way, post a reply if you continue to have problems with it.

    Hope it helps anyway.
    Last edited by Schmoopy; 12-01-2008 at 09:28 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •