FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Need help with a menu!





assex
Hi everyone,
assex here. I really know that you guys are helpfuk and are programming experts. I'm not that good so I need some help here.

I thought that I'd have a sort of menu bar on my Web Site, say with 5 links on it - Products, Downloads, Tutorials, Fun and Help.

I wanted the menu to be in such a way that when one moves the mouse over one of them, a menu appears below. For example, if they move their mouse over Fun, the following should appear in a menu:
Chatroom
Forum
Spoofs
Image Gallery
Latest News

Can somebody please help me with the code? It can be of any script - JavaScript, Java, PHP, Perl, anything!

If you don't know the code, could you state some Web Site that could help?

Thanks a lot. It's appreciated.
Diebels
Hi,

try Ulead Menu Applet
you´ll find it here http://www.ulead.com/ma/runme.htm

Diebels
martindecorte
If you don't want to pay, and/or you prefer using CSS and not Java (it'll be more fast & compatible), you can try this instead.

You have the choice between horizontal & vertical menus, and can personalize it as you want !
DoctorBeaver
You could also have a look at OpenCube's Nav Studio http://opencube.com

You can specify colours, background images, rollover colours/images, unlimited sub-menus, vertical or horizontal; in fact just about anything you could ever want. Plus the menu details are in an external file so when you edit the menu the changes automatically show on all pages.

The best thing about it? IT'S FREE!
jajarvin
Now we can use jQuery and CSS to make a pull down navigation menu.
Minimalist Pull Down Nav Menu with jQuery CSS inspired me to make the following code:

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pull Down Navigation Menu with jQuery and CSS</title>

<link href="css/pulldown.css" rel="stylesheet">
</head>
<style>
ul {
   font-size:1em;
   list-style:none;
}
nav > ul {
  font-size: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav {
  width: 960px;
  margin: 100px auto 0px;
  font-size: 16px;
}

nav > ul > li {
  ;width: 240px;
  width: 192px;
  float: left;
  position: relative;
}

nav > ul > li a {
  display: block;
  background: #16a085;
  color: #fff;
  padding: 5px 0px;
  text-align: center;
  text-decoration: none;
}

nav > ul > li a:hover { background: #1abc9c; }

nav > ul > li:hover a + ul { /*    display: block;*/
}

nav > ul > li > ul {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 100%;
  display: none;

</style>
<body>


<h1 style="margin-top:100px; text-align:center;">Pull Down Navigation Menu with jQuery and CSS</h1>
<nav>
  <ul>
    <li> <a href="">Products</a>
      <ul>
        <li><a href="">Menu 01-01</a></li>
        <li><a href="">Menu 01-02</a></li>
        <li><a href="">Menu 01-03</a></li>
        <li><a href="">Menu 01-04</a></li>
      </ul>
    </li>
    <li> <a href="">Downloads</a>
      <ul>
        <li><a href="">Menu 02-01</a></li>
        <li><a href="">Menu 02-02</a></li>
      </ul>
    </li>
    <li> <a href="">Tutorials</a>
      <ul>
        <li><a href="">Menu 03-01</a></li>
        <li><a href="">Menu 03-02</a></li>
        <li><a href="">Menu 03-03</a></li>
        <li><a href="">Menu 03-04</a></li>
        <li><a href="">Menu 03-05</a></li>
        <li><a href="">Menu 03-06</a></li>
      </ul>
    </li>
    <li> <a href="">Fun</a>
      <ul>
        <li><a href="">Chatroom</a></li>
        <li><a href="">Forum</a></li>
        <li><a href="">Spoofs</a></li>
        <li><a href="">Image Gallery</a></li>
        <li><a href="">Latest News</a></li>
      </ul>
    </li>
    <li> <a href="">Help</a>
      <ul>
        <li><a href="">Menu 04-01</a></li>
      </ul>
    </li>
  </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>
    $('nav').pulldown();   
</script>

</body>
</html>
Related topics
Reply to topic    Frihost Forum Index -> Scripting -> Others

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.