Member Avatar for srdva59

hi,
i looking for a dropdown menu something like this:

http://www.lwis.net/free-css-drop-down-menu/dropdown.ultimate.horizontal.html

but without jquery javascript or complex javascript.
the reason for mininum javascript if possible is that i use
many javascript already for other operations like ajax etc
and if i add jquery etc all functions simple don´t work :(
so i looking for a solution based only in css if possible that can
dropdown and work in all browsers ie6 inclusive.
thanks a lot for your help
:)

  • 5 Contributors
  • 4 Replies
  • 165 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by sam023
Member Avatar for scrappedcola

I'm pretty certain you are going to have to use a little js to get this to work. Generally you would have a horizontal unordered list whose list elements contain an anchor tag and a div whose display property is set to none. Then you have an onmouseover and onmouseout event that would set the div's display to "" and "none" respectively. No JQuery is necessary.

<ul>
  <li style="float:left" onmouseover="document.getElementById('myDiv').style.display='';" onmouseout="document.getElementById('myDiv').style.display='none';"
<div id=myDiv>stuff</div>
</li>
</ul>
Member Avatar for almostbob

javascript onmouseover onmouseout are unneccessary BS
css menus use
ul {}
ul.hover {}

definitions to achieve the same effect
try one of the sites that offer to code it for you

http://purecssmenu.com/

Edited by almostbob because: n/a
Member Avatar for fxm

Menus can be created with 100% CSS, 0% javascript. Here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <style type="text/css">
.menu {
    color: white;
    font-family: Tahoma;
    font-size: 8pt;
    font-weight: bold;
    border-right: 1px solid white;
    text-decoration: none;
    background-color: #313031;
    padding: 5px;
    }

    .menu:hover {
    background-color: #5A8EC6;
    }

    .toolbar {
    background-color: #313031;
    padding: 5px 0px 5px 0px;
    }

    </style>
    <title></title>
  </head>
  <body>
    <div class="toolbar">
      <a class="menu" href="menu1.html" title=
      "Visit Menu Item 1">&nbsp;Menu Item 1</a><a class="menu"
      href="menu1.html" title="Visit Menu Item 2">&nbsp;Menu Item
      2</a><a class="menu" href="menu1.html">&nbsp;Menu Item 3</a>
    </div>
  </body>
</html>

is a toy example.

The framework available at http://www.lwis.net/free-css-drop-down-menu/ does the same thing, BIG time :) If the DaniWeb menus aren't built with it, they could be.
For most browsers implementation is completely script-free; IE6 support does use some javascript/jquery [included].

Member Avatar for sam023

this cool Menu contain no javascript at all.. it is based on complete CSS.. this may help you..

Edited by sam023 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.