Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JUMP MENU - How To Jazz It Up?

    Hi there,

    Here is a sample code of my jump menu i made up in dreamweaver.

    <form name="form1">
    <select name="sitenavigation" onchange="MM_jumpMenu('parent',this,1)">
    <option value="#" selected="selected">Main Site</option>
    <option value="#">About Us</option>
    <option value="#">Portfolio</option>
    <option value="#">Services</option>
    <option value="#">Contact Us</option>
    <option value="#">Forum</option>
    <option value="#">Shop</option>
    <option value="#">Service Areas</option>
    <option value="#">Link To Us</option>
    <option value="#">F.A.Q</option>
    <option value="#">Service Quote</option>
    <option value="#">Join Us On Myspace</option>
    <option value="#">Join Us On Facebook</option>
    <option value="#">Models</option>
    <option value="#">Advertise With us</option>
    </select>
    </form>

    PROBLEM:

    My problem is when i add the above code to my website, there's no tie in to the site. When i click on the jump menu, background is white and text is plain - this doesn't match my site which brings down the quality of my website...Not good.

    So my question is is there away to alter the code to add a coloured background, and perhaps change the text to a different font, maybe even alter the size of the text?

    This would help me alot, thanks.

    Plus it's important that code changes be cross-browser friendly. I don't want something that only works in IE but not Firefox.

    Thanks for the help

    Rob

  • #2
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Doesn't anyone know?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to be patient. Threads can take up to days to be answered.

    You can make a single drop down menu

    http://www.alistapart.com/articles/dropdowns

    or you can look into using Nice Forms.

    The last solution requires JS to work. The first one doesn't. Well it does but its only a sprinkle for IE6. Using the second will allow it to degrade gracefully so it still works but then again your menu won't even work without JS. At least with the first one users can still see the links.
    Last edited by _Aerospace_Eng_; 08-24-2008 at 10:50 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    http://acomment.net/9-top-css-essent...ould-learn/299
    Look at #5 - Styling Forms

    It is basically the same thing as Aerospace
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    Senior Coder Len Whistler's Avatar
    Join Date
    Jul 2002
    Location
    Vancouver, BC Canada
    Posts
    1,323
    Thanks
    26
    Thanked 100 Times in 100 Posts
    Use CSS....Check out my jump menus.

    http://www.stubby.ca/index.php

    http://www.camerarov.com/




    -------
    Leonard Whistler

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Len Whistler View Post
    Use CSS....Check out my jump menus.

    http://www.stubby.ca/index.php

    http://www.camerarov.com/




    -------
    I still don't see from observing your source code how your jump menu has been coloured to match your site?

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is it a simple case where i won't actually see the coloured jump menu until i upload my page onto the server?
    Or should you still see the colour change when previewing in dreamweaver?

  • #8
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Do not double post.

    Download FireFox. Download the extensions Firebug and Web developer toolbar. This will show you the classes for every item you hover over. This will make styling with CSS easier.

    Code:
    <form style="background: black; color: white;">
    </form>
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #9
    Senior Coder Len Whistler's Avatar
    Join Date
    Jul 2002
    Location
    Vancouver, BC Canada
    Posts
    1,323
    Thanks
    26
    Thanked 100 Times in 100 Posts
    Quote Originally Posted by forbescreatives View Post
    I still don't see from observing your source code how your jump menu has been coloured to match your site?
    When you check the source code also check for the location and name of any external CSS files, you then can view the CSS code in the browser. Usually it will be style.css in the same folder as the index file.

    Code:
    <link rel="stylesheet" href="style.css" type="text/css">
    -----------------------------------------------------------------------------------





    index.php
    Code:
    <select name="menu" class="color" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;">
    style.css
    Code:
    .color {
    background-color: #000000;
    color: #B4873A;
    font-size: 18px;
    }

    -----------
    Leonard Whistler

  • Users who have thanked Len Whistler for this post:

    forbescreatives (08-26-2008)


  •  

    Posting Permissions

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