add jquery slidedown effect

I've used a jquery script to show/hide a block of links below a menu using ul li ul etc..

<script type="text/javascript">
      $(document).ready(function(){
            $('li.headlink').hover(
                  function() { $('ul', this).css('display', 'block'); },
                  function() { $('ul', this).css('display', 'none'); });
      });
</script>

I'd like to try have this slidedown but not sure if it can be applied it to the above.

thanks
freshwaterwestAsked:
Who is Participating?
 
anoyesConnect With a Mentor Commented:
OK, I think I've got something that'll work for you.  I took the menu div out of the list and used javascript to position it.  Also had to tweak the CSS at little.  Full code for the file's below

<style type="text/css">
/*---------------------------
main styles
---------------------------*/
 
body {font-size: 62.5%;line-height:1.5;font-family: Arial, Helvetica, sans-serif;background:#CCC url(../images/background.jpg) 0 0 repeat-x;}
 
a {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin:12px 0 12px 0;}
.imgfloatleft {float:left;margin:0 15px 15px 0;}
 
#wrapper {font-size:1.3em;width:920px;height:auto;position:relative;clear:both;margin:0 auto 0 auto;background:#FFF url(../images/head-bg.jpg) repeat-x;}
#header {clear:both;padding:0 30px 0 30px;width:860px;height:120px;background:url(../images/msw-logo.png) no-repeat;}
#home #main {background:#FFF url(../images/home-bg.jpg) no-repeat;}
#main {clear:both;width:860px;padding:0 30px 30px 30px;}
#footer {clear:both;width:860px;padding-top:30px;}
#footer, #footer a {color:#666;}
#footer .strap {font-size:14px;color:#F00;}
 
#main .intro {float:right;width:405px;}
#main .titles {width:510px;float:right;}
#main h1 {font-size:18px;color:#F00;line-height:1.1;padding:5px 0 15px 0;}
#main h2 {font-size:26px;color:#333;}
#main ul {margin:12px 0 12px 0;}
#main li {margin:6px 0 6px 13px;}
#main a {color:#777;}
#main a:hover {color:#F00;}
.space {float:left;width:1px;height:390px;}
#map {float:right;width:600px;height:500px;margin:0 0 20px 20px;}
.clear {display:block;clear:both;}
.red {color:#F00;}
#plant a.arrowleft {color:#F00;font-weight:bold;font-size:105%;background:url(../images/arrow-left.gif) 0 50% no-repeat;padding-left:15px;}
 
#plant ul.contactbtn  {list-style-type:none;margin:0;padding:0;clear:both;}
#plant ul.contactbtn li {float:left;list-style-type:none;}
#plant ul.contactbtn a:hover {text-decoration:none;}
      
#plant ul.contactbtn li a {
      display:block;
      font-size:110%;
      color:#FFF;
      padding:7px 14px 9px 14px;
      background:url(../images/navback_left.gif) left top no-repeat;}
 
#plant ul.contactbtn li a:hover {background:#F00;}
 
#plant ul.contactbtn li{
      background:url(../images/navback_right.gif) right top no-repeat;}
      
#plant ul.contactbtn li:hover{background:#F00;}
 
 
/*---------------------------
main nav
---------------------------*/
 
#mainnav {position:relative;padding:61px 0 0 130px;height:37px;background:url(../images/nav-background.gif) 85px 80px no-repeat;}
#nav, #nav * { padding: 0; margin: 0; }
#nav, #nav ul { list-style: none; }
#nav ul {float:left;}
 
#nav li {position:relative;}
 
#nav li,#nav a{
      display:inline;
      float:left;}
      
#nav a:hover {text-decoration:none;}
      
#nav li a {
      display:block;
      font-size:110%;
      color:#FFF;
      padding:7px 14px 9px 14px;
      background:url(../images/navback_left.gif) left top no-repeat;}
 
#nav li a:hover {background:#F00;}
 
      
#nav li{
      background:url(../images/navback_right.gif) right top no-repeat;
      margin-right:2px;}
      
#nav li:hover{background:#F00;}
 
 
/*---------------------------
main nav page selectors
---------------------------*/
 
#home li#m_home, #services li#m_services, #plant li#m_plant, #sp3 li#m_sp3, #contact li#m_contact {background:#F00 url(../images/navback_sel.gif) right top no-repeat;}
#home li#m_home a, #services li#m_services a, #plant li#m_plant a, #sp3 li#m_sp3 a, #contact li#m_contact a {background:url(../images/navback_sel_left.gif) left top no-repeat;}
#services li#m_services li a {background-image:none;}
 
/*---------------------------
main nav - submenus
---------------------------*/
.dropdown {width:500px;display:none;position:relative;clear:both;background: url(../images/dropbox_top.gif) top left no-repeat;text-align: left;}
.dropdown .mid {width:604px;clear:both;background: url(../images/dropbox_mid.gif) left repeat-y;}
.dropdown .base {height:30px;width:604px;clear:both;background: url(../images/dropbox_base.gif) bottom left no-repeat;}
.dropdown .left {width:240px;margin-left:10px;}
 
.dropdown ul {z-index:100;position:relative;float:left;margin:0;padding:0;overflow:visible;}
.dropdown ul li {color:#333;clear:both;float:none;display:block;background-image:none;width:100%;margin:0;padding:0;}
.dropdown ul li a {color:#666;padding:3px 3px 3px 5px;float:none;display:block;background-image:none;}
.dropdown ul li:hover {background-image:none;}
.dropdown ul li a:hover {background-color: #F00;color:#FFF;background-image:none;}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<script type="text/javascript">
  var timer;
  $(document).ready(function(){
    $('li.headlink, div.dropdown').hover(
      function() {
        clearTimeout(timer);
        var menu = $('div.dropdown');
        if (! menu.is(':visible'))
        {
          var pos = $(this).position();
          var x = pos.left;
          var y = pos.top;
          menu.css({'left':x});
          menu.slideDown('fast');
        }
      },
      function() {
        timer = setTimeout(function() {
          $('div.dropdown').slideUp('fast');
        }, 100);
      });
  });
</script>
 
 
<div id="mainnav">
  <ul id="nav">
    <li id="m_home"><a href="index.htm">home</a></li>
    <li class="headlink" id="m_services"><a href="services.htm">services</a></li>
    <li id="m_plant"><a href="plantforsale.htm">plant&nbsp;for&nbsp;sale</a></li>
    <li id="m_contact"><a href="contactus.htm">contact&nbsp;us</a></li>
  </ul>
</div>
<div class="dropdown">
  <div class="mid">
    <ul class="left">
      <li><a href="machinerepair.htm">Machine Repair</a></li>
      <li><a href="machineservice.htm">Machine Service</a></li>
      <li><a href="calibration.htm">Validation and Calibration to 7570</a></li>
      <li><a href="transformer.htm">Transfomer Rewind and Manufacture</a></li>
      <li><a href="pcb.htm">Circuit Board Repair</a></li>
      <li><a href="pcb.htm">Circuit Board Manufacture</a></li>
      <li><a href="wirefeed.htm">Range of wire feeders</a></li>
    </ul>
 
    <ul>
      <li><a href="recon.htm">Reconditioned equipment</a></li>
      <li><a href="design.htm">Design and Manufacture of specialist machines</a></li>
      <li><a href="parts.htm">Replacement parts</a></li>
      <li><a href="new.htm">New machine sales</a></li>
      <li><a href="parts.htm">Spare parts</a></li>
      <li><a href="parts.htm">Consumables</a></li>
      <li><a href="hire.htm">Equipment hire</a></li>
    </ul>
    <div class="clear"></div>
  </div>
  <div class="base"></div>
</div>

Open in new window

0
 
anoyesCommented:
It's actually really easy

<script type="text/javascript">
  $(document).ready(function(){
    $('li.headlink').hover(
      function() { $('ul', this).slideDown('fast'); },
      function() { $('ul', this).slideUp('fast'); });
  });
</script>

Open in new window

0
 
freshwaterwestAuthor Commented:
thanks for this, but it doesn't seem to work properly, a bit flickery and not really sliding, just a slight pause and then appearing. Could it be to do with my css? My original version without the sliding was working OK.

thanks
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
anoyesCommented:
Can you post the HTML / CSS that you have?
0
 
freshwaterwestAuthor Commented:
here's the relevant bits:
as you can see I have 2 columns inside the dropdown block..

<div id="mainnav">

<ul id="nav">
<li id="m_home"><a href="index.htm">home</a></li>
<li class="headlink" id="m_services"><a href="services.htm">services</a>

<ul>
<div class="dropdown">
<div class="mid">
<div class="left">
<li><a href="machinerepair.htm">Machine Repair</a></li>
<li><a href="machineservice.htm">Machine Service</a></li>
<li><a href="calibration.htm">Validation and Calibration to 7570</a></li>
<li><a href="transformer.htm">Transfomer Rewind and Manufacture</a></li>
<li><a href="pcb.htm">Circuit Board Repair</a></li>
<li><a href="pcb.htm">Circuit Board Manufacture</a></li>
<li><a href="wirefeed.htm">Range of wire feeders</a></li>
</div>

<div class="right">
<li><a href="recon.htm">Reconditioned equipment</a></li>
<li><a href="design.htm">Design and Manufacture of specialist machines</a></li>
<li><a href="parts.htm">Replacement parts</a></li>
<li><a href="new.htm">New machine sales</a></li>
<li><a href="parts.htm">Spare parts</a></li>
<li><a href="parts.htm">Consumables</a></li>
<li><a href="hire.htm">Equipment hire</a></li>
</div>
<div class="clear"></div>
</div>
<div class="base"></div>
</div>
</ul>
</li>
<li id="m_plant"><a href="plantforsale.htm">plant&nbsp;for&nbsp;sale</a></li>
<li id="m_contact"><a href="contactus.htm">contact&nbsp;us</a></li>
</ul>
</div>
</div>

and the styles:
@import url("reset.css");


/*---------------------------
main styles
---------------------------*/

body {font-size: 62.5%;line-height:1.5;font-family: Arial, Helvetica, sans-serif;background:#CCC url(../images/background.jpg) 0 0 repeat-x;}

a {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin:12px 0 12px 0;}
.imgfloatleft {float:left;margin:0 15px 15px 0;}

#wrapper {font-size:1.3em;width:920px;height:auto;position:relative;clear:both;margin:0 auto 0 auto;background:#FFF url(../images/head-bg.jpg) repeat-x;}
#header {clear:both;padding:0 30px 0 30px;width:860px;height:120px;background:url(../images/msw-logo.png) no-repeat;}
#home #main {background:#FFF url(../images/home-bg.jpg) no-repeat;}
#main {clear:both;width:860px;padding:0 30px 30px 30px;}
#footer {clear:both;width:860px;padding-top:30px;}
#footer, #footer a {color:#666;}
#footer .strap {font-size:14px;color:#F00;}

#main .intro {float:right;width:405px;}
#main .titles {width:510px;float:right;}
#main h1 {font-size:18px;color:#F00;line-height:1.1;padding:5px 0 15px 0;}
#main h2 {font-size:26px;color:#333;}
#main ul {margin:12px 0 12px 0;}
#main li {margin:6px 0 6px 13px;}
#main a {color:#777;}
#main a:hover {color:#F00;}
.space {float:left;width:1px;height:390px;}
#map {float:right;width:600px;height:500px;margin:0 0 20px 20px;}
.clear {display:block;clear:both;}
.red {color:#F00;}
#plant a.arrowleft {color:#F00;font-weight:bold;font-size:105%;background:url(../images/arrow-left.gif) 0 50% no-repeat;padding-left:15px;}

#plant ul.contactbtn  {list-style-type:none;margin:0;padding:0;clear:both;}
#plant ul.contactbtn li {float:left;list-style-type:none;}
#plant ul.contactbtn a:hover {text-decoration:none;}
      
#plant ul.contactbtn li a {
      display:block;
      font-size:110%;
      color:#FFF;
      padding:7px 14px 9px 14px;
      background:url(../images/navback_left.gif) left top no-repeat;}

#plant ul.contactbtn li a:hover {background:#F00;}

#plant ul.contactbtn li{
      background:url(../images/navback_right.gif) right top no-repeat;}
      
#plant ul.contactbtn li:hover{background:#F00;}


/*---------------------------
main nav
---------------------------*/

#mainnav {position:relative;padding:61px 0 0 130px;height:37px;background:url(../images/nav-background.gif) 85px 80px no-repeat;}
#nav, #nav * { padding: 0; margin: 0; }
#nav, #nav ul { list-style: none; }
#nav ul {float:left;}

#nav li {position:relative;}

#nav li,#nav a{
      display:inline;
      float:left;}
      
#nav a:hover {text-decoration:none;}
      
#nav li a {
      display:block;
      font-size:110%;
      color:#FFF;
      padding:7px 14px 9px 14px;
      background:url(../images/navback_left.gif) left top no-repeat;}

#nav li a:hover {background:#F00;}

      
#nav li{
      background:url(../images/navback_right.gif) right top no-repeat;
      margin-right:2px;}
      
#nav li:hover{background:#F00;}


/*---------------------------
main nav page selectors
---------------------------*/

#home li#m_home, #services li#m_services, #plant li#m_plant, #sp3 li#m_sp3, #contact li#m_contact {background:#F00 url(../images/navback_sel.gif) right top no-repeat;}
#home li#m_home a, #services li#m_services a, #plant li#m_plant a, #sp3 li#m_sp3 a, #contact li#m_contact a {background:url(../images/navback_sel_left.gif) left top no-repeat;}
#services li#m_services li a {background-image:none;}

/*---------------------------
main nav - submenus
---------------------------*/
        
#nav li.headlink ul {display:none;z-index:100;position:relative;float:none;clear:both;margin:0;padding:0;overflow:visible;}
#nav li.headlink ul .dropdown {position:absolute;top:0;left:0;clear:both;background: url(../images/dropbox_top.gif) top left no-repeat;text-align: left;padding:19px 0 0 0;}
#nav li.headlink ul .mid {width:604px;clear:both;background: url(../images/dropbox_mid.gif) left repeat-y;}
#nav li.headlink ul .base {height:30px;width:604px;clear:both;background: url(../images/dropbox_base.gif) bottom left no-repeat;}

      #nav li .left {margin-left:15px;margin-right:10px;width:270px;float:left;}
      #nav li .right {margin-right:30px;width:250px;float:right;}      
      #nav li.headlink ul li {color:#333;clear:both;float:none;display:block;background-image:none;width:100%;margin:0;padding:0;}
      #nav li.headlink ul li a {color:#666;padding:3px 3px 3px 5px;float:none;display:block;background-image:none;}
      #nav li.headlink ul li:hover {background-image:none;}
      #nav li.headlink ul li a:hover {background-color: #F00;color:#FFF;background-image:none;}

thanks
0
 
anoyesCommented:
So the problem is that div with the class "dropdown".  It's positioned absolute, which takes it out of the normal flow of elements.  So the UL element actually expands as it's supposed to (if you put a border around it or something you can see just the border b/c there's no content), but because that div is absolutely positioned it's not actually w/in the div anymore.  You can change it to be relatively positioned, but then the whole 'Services' menu item expands.  I'm working on trying to find a way around this and I'll get back to you.
0
 
freshwaterwestAuthor Commented:
right I see what you mean, so it's because I have the dropdown in a layer to allow it to be bigger than the parent menu item. It would be great if you know a way around this, would be useful to know.

many thanks...
0
 
freshwaterwestAuthor Commented:
seems to work great - will do some more tests when I get chance - many thanks..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.