Menu Coding Question

benjaminakhoch

New Member
I am new to Javascript and Jquery and am currently redesigning a website for a local television station in Alaska. I have been looking around at a lot of major networks websites for some inspiration and came across something that I really like and would like to do something similar but am not really sure where to start.

At www.usanetwork.com under schedule, I love the way its put together for the station programming. This is something I would really like to emulate and incorporate into the station that I am working for. I don't really want it in the menu like they have it but a link to a page that could show that same structure.

Anyone got any suggestions or can help point me in the right direction?
 
The basic html
Code:
<html>
<head></head>
<body>
  <div id = "listings">
      //code goes here
  </div>
     <button id="menu">Check Listings</button>
</body>
</html>

basic CSS
Code:
div#listings{
    display:none;
    width:100%;
    height:200px;
}
Basic JavaScript (jQuery to be exact)
Code:
$('#menu').mouseenter(function(){
   $('listings').slideToggle('2000');
};

That SHOULD do the trick.. once again, really basic code so feel free to mark it up as cool as ya like but its a start and has the functionality your looking for.
 
Last edited:

CaldwellYSR

Member
The basic html
Code:
<html>
<head></head>
<body>
  <div id = "listings">
      //code goes here
  </div>
     <button id="menu">Check Listings</button>
</body>
</html>

basic CSS
Code:
div#listings{
    display:none;
    width:100%;
    height:200px;
}
Basic Java
Code:
$('#menu').hover(function(){
   $('listings').slideToggle('2000');
};

That SHOULD do the trick.. once again, really basic code so feel free to mark it up as cool as ya like but its a start and has the functionality your looking for.

Good answer! Could you edit it to say javascript instead of java though? Just to avoid confusion.
 
I was looking at that usa page at work and my browser is a little off, might want to change the 'slideToggle' to fadeToggle. as that seems now that I look at it at home more of the effect.
 
Top