Help with this code for image drop down menu

Discussion in 'HTML & Website Design' started by jazzzyman, Mar 20, 2013.

0
  1. #1
    ok so i have found this code and been trying to fiddle with it knowing hardly anything of what im doing

    how do i add additional images to the drop down list, make it an image that the menu drops from, make the image link to a specific page, remove the links that drop down with the image lol

    if anyone has a better piece of code aswell would be good or can work with this one

    <html>

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Item 1</title>
    </head>

    <body>

    <style type="text/css">
    <!--the css for the nav bar-->
    #navbar
    {
    clear: both;
    position: absolute;
    left: 488px;
    width: 466px;
    }

    #navbar ul{


    float:left;
    display:block;
    }
    #navbar ul li img
    {
    padding:0px;
    margin:0px;
    border:none;

    }
    #navbar ul li{
    text-align: center;
    display:block;
    float:left;
    width:55px;
    border-left:thin #666 solid;
    border-right:thin #666 solid;
    }




    #navbar li li, #navbar li li a{
    height:0px;
    margin-top: -100px;
    text-align: center;
    zoom: 1;
    background-color:#666;
    text-decoration: none;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    border:thin #000 solid;
    width:93px;
    display:table-row;

    }

    .navbar link{
    color: #ff6600;
    text-decoration: none;
    }

    #navbar li:hover li{
    height:auto;
    margin-top:0px;
    margin-bottom: 0px;
    }



    #navbar li:hover li a{
    color:#FFF;

    text-decoration: none;
    }

    #navbar li li a:hover{
    color:#333;
    }

    #navbar ul ul{
    background:black;
    }

    #navbar li li:hover li li{
    height:auto;
    margin-top:0px;
    margin-bottom: 0px;
    margin-left:-100px;
    margin-top:-30px;

    }

    #navbar li:hover li li{
    height:77px;
    margin-top:-79px;
    margin-bottom: 0px;
    margin-left:-96px;
    }

    #thum
    {
    width:70px;
    z-index:-2;
    }

    #thum li
    {
    height:auto;
    z-index:-50;
    }
    #navbar li li.my-thumb {width:40px;}
    #navbar li .thumb-menu {width:140px;padding:0;}
    </style>
    </head>
    <body>

    <!--html of nav bar-->
    <div id="navbar">
    <ul id="items" >
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
    <ul class="thumb-menu">
    <li class="my-thumb"><img width="70" height="60" src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg"/></li>
    <li><a href="#">About</a></li>
    <li><a href="#">About2</a></li>
    <li><a href="#">About3</a></li>
    </ul>
    <li><a href="#">Item 3 </a></li>

    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    </ul>
    </div></body>

    </html>
     
    Solved! View solution.
    jazzzyman, Mar 20, 2013 IP
  2. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #2
    i really can't understand what you want to do ! you have any example or something !?
     
    themes4all, Mar 20, 2013 IP
  3. Strider64

    Strider64 Member

    Messages:
    40
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    25
    #3
    Please don't take this the wrong way, but you will be better off trying to learn html/css instead of taking code snippets here and there. Get a good book on html/css and sit down with your favorite beverage, but if you still insist on learning by seeing other people's cod. Then I suggest the plug in Firebug for Firefox and install it. Click on the little bug and then the little box with the point symbol then hover over a website and you will see the different tags/elements on the page. You can even play around with the css to see if you changes that are done to it. Google css Zen Garden: The Beauty of CSS and/or Smashing Magazine, they are a great resource on website design and development.
     
    Strider64, Mar 20, 2013 IP
  4. #4
    you can add additional image between this <li class="my-thumb">your image stay here</li>
     
    creativewebmaster, Mar 20, 2013 IP
  5. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    Thanks guys i should try and learn
    ive decided to go with another piece of code so i started a thread on it if you can help i need to figure out why the browser thinks that the page is still loading
    https://forums.digitalpoint.com/threads/this-code-causes-page-to-keep-loading.2645111/
     
    jazzzyman, Mar 21, 2013 IP