Skip navigation
Currently Being Moderated

Add JS dropdown to existing site?

Jan 31, 2013 7:31 PM

Hi,

 

The image below is a website that was designed by another company.  The owner wants me to start doing updates to it, and one thing he'd like is to add some kind of dropdown to the main navigation items (seen in green circle).

 

Does anyone have any ideas or suggestions on how I can do this in JS without messing up the existing site's design?  One thing I don't like is if you add dropdown it kind of covers up the large photos like if it dropped down it'd cover that girl's face.  Any ideas suggested.

 

Thanks, Deaf Guy

 

headers.jpg

 
Replies
  • Currently Being Moderated
    Feb 1, 2013 5:34 AM   in reply to Michael Walton

    Can you post a link?

     

    I would recommend just doing a simple CSS drop and not including Javascript.  But it depends on what's going on now.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 1, 2013 4:00 PM   in reply to Michael Walton

    Definitely do this in CSS.  It's already half started for you.  If you want a drop-down there are a couple things to keep in mind.  The top level of a drop-down should not go anywhere or go to an empty anchor tag "#".  Then create your drop-down in the ul structure like:

     

    <ul><li>toplevel<ul><li>toplevel-subitem</li><li>sub-item2</li></ul></ li></ul>

     

    That's a super-simplistic example.  Then you do things in css like:

     

    ul ul { opacity: 0; visibility: hidden; }

    li:hover a > ul { opacity: 1; visibility: visible; }

     

    Again, very simplistic.  However, based on the size of the text, I'm almost consider a more responsive menu design because that text is very small to click on mobile.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points