• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1972
  • Last Modified:

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
0
freshwaterwest
Asked:
freshwaterwest
  • 4
  • 4
1 Solution
 
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
 
anoyesCommented:
Can you post the HTML / CSS that you have?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
anoyesCommented:
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
 
freshwaterwestAuthor Commented:
seems to work great - will do some more tests when I get chance - many thanks..
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now