6 Replies - 451 Views - Last Post: 23 October 2013 - 11:10 PM

#1 laura225  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 17-October 13

Code for a simple single drop down menus

Posted 23 October 2013 - 12:01 PM

hi everyone i am new to web develpment and i have been looking at jquery plugin for single drop down menu but i dont understand it so complex.

Does anyone or can anyone provide an easy code for me to use?

i want to have a if you click(the main heading) it drops down a single list and if u click again it goes away.



i was looking at this
jquery drop down menu single


but i dont understand it , it doesnt work :/ i have a file called script.js where i keep all code. it does work as i used an alert function.


thanks alot hope someone can help.

Is This A Good Question/Topic? 0
  • +

Replies To: Code for a simple single drop down menus

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3460
  • View blog
  • Posts: 11,727
  • Joined: 12-December 12

Re: Code for a simple single drop down menus

Posted 23 October 2013 - 12:15 PM

That plug-in is, to be honest, one of the simplest ones available. So how is your knowledge of Javascript and jQuery? And are there errors in your browser's console?

Post the code you are working with, wrapped in code-tags.
Was This Post Helpful? 0
  • +
  • -

#3 .code  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 8
  • Joined: 21-October 13

Re: Code for a simple single drop down menus

Posted 23 October 2013 - 02:50 PM

I've written and commented out a very simple jquery dropdown menu. I think the comments should explain everything but let me know if there's something you still don't understand:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dream In Code - Dropdown</title>
<!-- The 2 script tags below are importing the jQuery libraries -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- the style below is used to hide the submenu on page load -->
<style>
.submenu{
	display:none;	
}
</style>
</head>

<body>
	<!-- markup for menu/submenu -->
	<nav>
        <ul class="menu">
            <li>
                <a class="dropdown" href="#">test dropdown</a>
                <ul class="submenu">
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    
    <script type="text/javascript">
	$(document).ready(function(){ //when the page loads do...
		$('.dropdown').click(function(){ //when you click the dropdown link
			/*
			 * If the submenu is visible it fades out.
			 * If the submenu is hidden it fades in.
			 */
			$('.submenu:visible').fadeOut('fast'); //can also be .hide()
			$('.submenu:hidden').fadeIn('fast'); //can also be .show()
		});
	});
	</script>
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3460
  • View blog
  • Posts: 11,727
  • Joined: 12-December 12

Re: Code for a simple single drop down menus

Posted 23 October 2013 - 02:57 PM

That code works.
Was This Post Helpful? 0
  • +
  • -

#5 .code  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 8
  • Joined: 21-October 13

Re: Code for a simple single drop down menus

Posted 23 October 2013 - 03:04 PM

View Postandrewsw, on 23 October 2013 - 02:57 PM, said:

That code works.


Thank you for confirming that lol
Was This Post Helpful? 0
  • +
  • -

#6 laura225  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 17-October 13

Re: Code for a simple single drop down menus

Posted 23 October 2013 - 11:01 PM

View Post.code, on 23 October 2013 - 03:04 PM, said:

View Postandrewsw, on 23 October 2013 - 02:57 PM, said:

That code works.


Thank you for confirming that lol



hi thanks alot i am about to test it out. :bananaman:
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3460
  • View blog
  • Posts: 11,727
  • Joined: 12-December 12

Re: Code for a simple single drop down menus

Posted 23 October 2013 - 11:10 PM

View Post.code, on 23 October 2013 - 10:04 PM, said:

Thank you for confirming that lol

I thought you were the OP supplying the code I asked for.

This post has been edited by andrewsw: 23 October 2013 - 11:11 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1