Drop down menu html/css

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

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?

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> 

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

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

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

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

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.

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?

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

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

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");     
}

Still nothing

Are you adding the code directly into your HTML?

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

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> 

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?

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.

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

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.

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

Many thanks.