Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Paul Murphy
Paul Murphy
6,162 Points

Drop down menu html/css

Hi,

My company has asked me to create a drop down menu for their existing website (which I did not develop/design).

www.masteel.co.uk

on the top menu banner they would like a drop down menu for the specialist markets link.

Here is how the menu is structured:

<div id="menu-index"> 
        &bull;&nbsp;<a href="index.htm" class="sub">&nbsp;home&nbsp;</a> 
        &bull;&nbsp;<a href="steel_products.htm" class="sub">&nbsp;our steels&nbsp;</a> 
        &bull;&nbsp;<a href="international_trade.htm"     class="sub">&nbsp;global trade&nbsp;</a> 
        &bull;&nbsp;<a href="markets.htm" class="sub market-    sectors">&nbsp;market sectors&nbsp;</a>
        &bull;&nbsp;<a href="services.htm"     class="sub">&nbsp;services&nbsp;</a> 
        &bull;&nbsp;<a href="media.htm" class="sub">&nbsp;media     centre&nbsp;</a>
         &bull;&nbsp;<a style="background-color:#ff9900;" href="jobs.htm"     class="sub">&nbsp;Jobs&nbsp;</a>      
        &nbsp;&nbsp;<a href="contact.htm"     class="sub">&nbsp;contact&nbsp;</a></div> <div id="scrollup"> 

How can I achieve this with the current markup?

5 Answers

Kevin Kenger
Kevin Kenger
32,834 Points

Hey Paul,

I made a little CodePen to tinker around and obviously it's not going to be the end result (I aligned everything quickly, and the styling would fall apart pretty easily in a real-word site), but hopefully it will give you an idea of how to go about making your drop-down menu. I'll give you a little walkthrough below.

I created a new div with a few list items in it to use as the drop-down menu.

    <div id="menu-toggle">
      <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
      </ul>
    </div>

And then used jQuery to trigger an event handler when you click on the link, using its class sectors.

$('.sectors').click(function() {
  event.preventDefault();
  $('#menu-toggle').toggle();
});
Paul Murphy
Paul Murphy
6,162 Points

Thank you! Much appreciated, I'll tinker around with this :)

Paul Murphy
Paul Murphy
6,162 Points

Hi Kevin, sorry to bother you with this again I added the java inside a script tag in the html like this http://codepen.io/anon/pen/zfgln

Doesn't seem to be working... any ideas?

Kevin Kenger
Kevin Kenger
32,834 Points

No bother at all! The Javascript code I used was from the jQuery library, so all you have to do is reference the jQuery file before your Javascript code so the browser understands it. Like this:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
$('.sectors').click(function() {
  event.preventDefault();
  $('#menu-toggle').toggle();
});
</script> 
Paul Murphy
Paul Murphy
6,162 Points

It works in codepen but not when I include the code in my index & css file

Kevin Kenger
Kevin Kenger
32,834 Points

Would you mind copying those files into CodePen so I can mess around with them?

Paul Murphy
Paul Murphy
6,162 Points

http://codepen.io/anon/pen/eAhBE < thats the index file and main css file. Thank you!

Kevin Kenger
Kevin Kenger
32,834 Points

OK. Here's the new pen. I modified the the HTML file by moving the <script> tags to the bottom of the body element, I converted the Sass styling back to vanilla CSS, and I modified the JS a bit and appended the drop-down menu to the link. Hopefully everything should work fine now. Just copy and paste the code from CodePen into their respective files.

Note: I removed the <!DOCTYPE> from the HTML because CodePen doesn't require that and it was giving me an annoying error. So be sure to add that back in when modifying your files.

Paul Murphy
Paul Murphy
6,162 Points

You my good Sir are far too kind!! Thank you, Muchos Gracias, Danka!

Paul Murphy
Paul Murphy
6,162 Points

There's 1 issue that has arisen. The drop down works great but the news ticker I had which would rotate news articles with the div class headline is no longer working.

Kevin Kenger
Kevin Kenger
32,834 Points

Hm, that's strange. I didn't think any of the code we used interfered with any other elements. So if you remove all of the code for the drop-down menu, the news ticker works?

Paul Murphy
Paul Murphy
6,162 Points

Correct. Seems as though it is the java that is blocking the ticker

Kevin Kenger
Kevin Kenger
32,834 Points

OK so the ticker uses a file called main.js in a folder called lib. So it wasn't working in CodePen because it doesn't have access to that file. So I grabbed the code from the main site and imported it into CodePen, and now the ticker works fine. Here's the pen. Notice the Javascript code on the right. That's all from the main.js file. Make sure that you have access to that file in your development environment. If you don't, just copy the code from the pen and save it to a new Javascript file.

Paul Murphy
Paul Murphy
6,162 Points

Admittedly JS isn't something I'm familiar with

I presume this is the code that handles the ticker

$(document).ready(function(){
  headline_count = $("div.headline").size();
  $("div.headline:eq("+current_headline+")").css('top', '5px');
  setInterval(headline_rotate,5000); //time in milliseconds
});

function headline_rotate() {
  old_headline = current_headline % headline_count;
  new_headline = ++current_headline % headline_count;
  $("div.headline:eq(" + old_headline + ")").css('top', '210px');
  $("div.headline:eq(" + new_headline + ")").show().animate({top: 5},"slow");     
}

I copied and pasted the code from your pen into my markup and the ticker isn't displaying at all

Kevin Kenger
Kevin Kenger
32,834 Points

Make sure you add the variables in the JS code:

var headline_count;
var current_headline=0;

$(document).ready(function(){
  headline_count = $("div.headline").size();
  $("div.headline:eq("+current_headline+")").css('top', '5px');
  setInterval(headline_rotate,5000); //time in milliseconds
});

function headline_rotate() {
  old_headline = current_headline % headline_count;
  new_headline = ++current_headline % headline_count;
  $("div.headline:eq(" + old_headline + ")").css('top', '210px');
  $("div.headline:eq(" + new_headline + ")").show().animate({top: 5},"slow");     
}
Kevin Kenger
Kevin Kenger
32,834 Points

Are you adding the code directly into your HTML?

Paul Murphy
Paul Murphy
6,162 Points

No. I'm adding the code for the headline into the main.js file

Kevin Kenger
Kevin Kenger
32,834 Points

All right try adding it into the HTML page underneath the code for the drop-down.

<script type="text/javascript">
$('.sectors').append($('#menu-toggle')).click(function() {
  event.preventDefault();
  $('#menu-toggle').toggle();
});

// Add the ticker JS code right here

</script> 
Paul Murphy
Paul Murphy
6,162 Points

That didn't seem to work either, interestingly the tinkering around has resulted in the menu nav to disappear from every other page than the index.

Is there a way to create a drop down without it conflicting with the current JS?

Kevin Kenger
Kevin Kenger
32,834 Points

I'm not sure, but I think the disappearance of the menu on the other pages might be due to the name of the menu ID. I noticed that on the main site, the nav has an ID of menu, but in the index.html file you gave me, its ID is menu-index.

Actually there weren't really any elements other than the menu nav that the code interacted with. I don't think it affected the existing JS code at all, because in the CodePen, everything works fine, including the menu drop-down and the news ticker. I'm actually really baffled by all of this. I'm stumped as to what the problem might be.

Paul Murphy
Paul Murphy
6,162 Points

I made some amendments to the site this morning, all of the information I have given so far has been correct in terms of ID's and files I am using to make changes offline.

I think I'll go back to the drawing board on this and start from scratch, It could well be (and probably is) that I have made an error somewhere along the line. I'll try to rectify this over the next couple of days and get back to you with an update.

Kevin Kenger
Kevin Kenger
32,834 Points

Yeah please let me know. I'm curious to see what the deal is.

Paul Murphy
Paul Murphy
6,162 Points

Hi Kevin...... 2 weeks later and I have it cracked! (well, sort of).

On some pages of our site we have a slider which now seems to be affected by addition of a drop down menu. Any suggestions on how to overcome this? Also, will including the JS within the html slow the overall speed of my site?

Have a look here for the conflict: http://masteel.co.uk/services.htm

Thank you for your help before, It seems it was just a syntax error on my part.

Paul Murphy
Paul Murphy
6,162 Points

Hi Kevin Kenger , are you able to assist on the above?

Many thanks.

Kevin Kenger
Kevin Kenger
32,834 Points

Hey Paul,

Since I don't know what part of the dropdown Javascript code is affecting the slider, I can't make any suggestions of what to do. Another alternative is to use CSS instead of Javascript to create the affect, although the dropdown menu would appear when you hover over the link, instead of clicking on it.

Although the way the menu is set up right now, using CSS wouldn't work to my knowledge. You have to set up the main menu in a certain way, using a list, like this:

<ul id="menu">
  <li><a href="home.html">Home</a></li>
  <li><a href="market.html">Market Selectors</a></li>
</ul>

The way you would set up the dropdown menu is something like this:

<ul id="menu">
  <li><a href="home.html">Home</a></li>
  <li><a href="market.html">Market Selectors</a>
    <ul id="dropdown">
      <li><a href="#">Dropdown Item 1</a></li>
      <li><a href="#">Dropdown Item 2</a></li>
      <li><a href="#">Dropdown Item 3</a></li>
    </ul>
  </li>
</ul>

And then in the CSS you would hide the dropdown menu and then when you hover over the link, change the display property to block.