Drop down navigation bar.

Discussion in 'Digital Marketing' started by Dunn's, Feb 22, 2008.

  1. Dunn's

    Dunn's LawnSite Bronze Member
    Posts: 1,546

    Hey everyone anyone know how to make drop down navigation bars.

    I am thinking I need to make something like a mouseover image. Then making the text links.

    Is that how you all have or would do it or is there a better way?


    Thanks in advance for all replies.
     
  2. JDUtah

    JDUtah LawnSite Silver Member
    from UT
    Posts: 2,636

    It takes a little understanding of java and css, which I don't have but I'll try to explain what I did... My new site will have them and I have a test of it uploaded. http://www.jdmowers.com/web2

    Basically in the header, if you look, you can see me run menu.css and menu.js... the css file calls out what the drop down menu will look like (colors, sizes etc), and the js file contains the java that tells the browser how to do it(show it on mouseover etc.)... Running those files from your heading tags tells the browser how to handle the menu when it gets to it.

    Then after running those two files from your heading tags, In your body tags when you get to your menu, you basically build a table, but in that table you tell it to run the java commands when the mouse is over certain cells in the table.. It's hard to explain, especially since I am no expert but just searched online and did the classic trial and error to get it working. But if you are zealous enough you should be able to figure it out...

    Save http://www.jdmowers.com/web2/menu.css and http://www.jdmowers.com/web2/menu.js to the folder containing page you want the menu to be on...

    Then place these commands between your header tags....

    <script type="text/" =".">
    </script>
    <link rel="" ="menu." type="text/css"
    media="screen" />


    Then view the source of http://www.jdmowers.com/web2 Look through it and figure out where I call out the menu... copy that into your page and adjust it, along with the menu.css file until it works for you...

    Hope it helps. I can't explain to much more, but can try if you have questions... good luck!
     
  3. Dunn's

    Dunn's LawnSite Bronze Member
    Posts: 1,546

    Thanks I am going to give it try and see what I can come up with.
     
  4. JDUtah

    JDUtah LawnSite Silver Member
    from UT
    Posts: 2,636

    I posted the wrong things for you to include in your header tags.. paste these ones instead...

    <script type="text/javascript" src="menuh.js">
    </script>

    <link rel="stylesheet" href="menu.css" type="text/css"
    media="screen" />
     
  5. snobird

    snobird LawnSite Member
    Posts: 23

    the better drop downs will need to be made in java, if you google search there is a few sites who have preloaded generators who can make them for you or I could possibly help you out when I get some free time
     
  6. NeilsWeb

    NeilsWeb LawnSite Member
    Posts: 1

  7. JDUtah

    JDUtah LawnSite Silver Member
    from UT
    Posts: 2,636

    Interesting. I never distingiushed the two. Are they different really?
     
  8. NeilsWeb

    NeilsWeb LawnSite Member
    Posts: 1

    Yap. they sure are :)

    Java is a high level programing language (like C, C++,Pascal, etc..) Java can be used to develop large industrial sized applications. It's main use is developing programs that are not used on the web. You can not write Java straight into an HTML document.

    JavaScript was developed to run small scripts/programs within the web browser. It allowed users to preform more dynamic tasks that HTML was not capable of. It is typically written write into the HTML document.
     
  9. JDUtah

    JDUtah LawnSite Silver Member
    from UT
    Posts: 2,636

    WoW! You learn soemething every day don't you! I'll be sure to distinguish the two from now on. Thanks!
     
  10. NeilsWeb

    NeilsWeb LawnSite Member
    Posts: 1

    No problem! It is a typical mistake. I did not make the distinguish between the two when I first started out in web development. If you are interested in learning Javascript this is an excellent site with interactive tutorials: http://www.w3schools.com/js/default.asp
     

Share This Page