0

yes i am trying to create a drop down list menu for example

test 1 when click on this link it will drop down under
test 2

that type i dont mind if it is in css or html style i have checked everything im dont know css very well but am a quick learner if anyone has any kind of code it would be helpful please and thanks

2
Contributors
21
Replies
22
Views
7 Years
Discussion Span
Last Post by shaya4207
0
<a href="#" onclick="javascript: document.getElementById('menu').style.display = 'block'">Show menu</a>
<div id="menu" style="display: none;">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

Is this like what you had in mind? If not, please explain some more what you want.

0

thank you very much yes this is what in mind now if i can ask you one more thing is there a added code that we can do that when you click on show menu it will collapse and take away the list item 1 and 2

0

The easiest way I can think of is with JavaScript

<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
      document.getElementById('menu').style.display = 'block';
      o.className = "show";
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
    }
  }
</script>

<a href="#" class="hidden" onclick="show_hide(this)">Show menu</a>
<div id="menu" style="display: none;">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>
0

thank you, this is awesome i would never have thought about doing it this way.

is there away that when click on show menu it will drop right under it as to it having a space between show menu and list1

0

I'm not sure I understood you exactly, perhaps this is what you had in mind...

<style type="text/css">
  #menu{
    margin-left: -40px;
    margin-top: -17px;
  }
  #menu ul{
    list-style: none;
  }
</style>
0

basically this is how i imagine it being set up

show menu when you click on this

show menu and this is what i want it to look like
list 1
list 2

the way that you created it for me which i like to is more like this

show menu

*test 1
*test 2

0

is this the correct set up that should make it work im new with the css so im just basically copying and pasting


<html>
<style type="text/css">
#menu{
margin-left: -40px;
margin-top: -17px;
}
#menu ul{
list-style: none;
}
</style>
<a href="#" class="hidden" onclick="show_hide(this)">Show menu</a>
<div id="menu" style="display: none;">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
</html>

0

Everything should be within the <body> tags

<html>
<head>
</head>
<body>
<style type="text/css">
  #menu{
    margin-left: -40px;
    margin-top: -17px;
  }
  #menu ul{
    list-style: none;
  }
</style>
<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
      document.getElementById('menu').style.display = 'block';
      o.className = "show";
      return false;
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
      return false;
    }
  }
</script>

<a href="#" class="hidden" onclick="return show_hide(this)">Show menu</a>
<div id="menu" style="display: none;">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>
</body>
</html>
0

dude you are a life saver thank you very much for your assistance if i need any more help with my website i will let you know

0

My pleasure, enjoy coding...

P.S. Please make this 'Solved'...

Edited by shaya4207: n/a

0

never mind back to the drop down list lets say i want to create another show menu link with another set of information under for example

show menu
list 1
list 2
show menu 2 
link 1 
link 2

this is what i added to it

<html>
<head>
</head>
<body>
<style type="text/css">
  #menu{
    margin-left: -40px;
    margin-top: -17px;
  }
  #menu ul{
    list-style: none;
  }
</style>
<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
       document.getElementById('menu').style.display = 'block';
       o.className = "show";
       return false;
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
      return false;
    }
  }
 </script>

 <a href="#" class="hidden" onclick="return show_hide(this)">E-Mail</a>
 <div id="menu" style="display: none;">
   <ul>
    <li>MAC Mail</li>
    <li>Outlook Express 6</li>
    <li>Windows Mail</li>
    <li>Windows Live MAil<li>
    <li>Microsoft Outlook 2003</li>
    <li>Microsoft Outlook 2007</li>
    <li>Microsoft Outlook 2010</li>
   </ul>
 </div>
<p>
 <a href="#" class="hidden" onclick="return show_hide(this)">Windows XP</a>
 <div id="menu" style="display: none;">
   <ul>
    <li>MAC Mail</li>
    <li>Outlook Express 6</li>
    <li>Windows Mail</li>
    <li>Windows Live MAil<li>
    <li>Microsoft Outlook 2003</li>
    <li>Microsoft Outlook 2007</li>
    <li>Microsoft Outlook 2010</li>
   </ul>
 </div>
 </body>
 </html>

what did i do incorrect

Edited by mike_2000_17: Fixed formatting

0

The easiest way would be to give each a distinct 'id' (which is also the correct way), and make to separate JS functions, separately targeting the 'divs'...

<style type="text/css">
#menu{
margin-left: -40px;
margin-top: -17px;
}
#menu ul{
list-style: none;
}
</style>
<script type="text/javascript">
function show_hide(o){
if(o.className == "hidden"){
document.getElementById('menu1').style.display = 'block';
o.className = "show";
return false;
}else if(o.className == "show"){
document.getElementById('menu1').style.display = 'none';
o.className = "hidden";
return false;
}
}
function show_hide2(o){
if(o.className == "hidden"){
document.getElementById('menu2').style.display = 'block';
o.className = "show";
return false;
}else if(o.className == "show"){
document.getElementById('menu2').style.display = 'none';
o.className = "hidden";
return false;
}
}
</script>

<a href="#" class="hidden" onclick="return show_hide(this)">E-Mail</a>
<div id="menu1" style="display: none;">
<ul>
<li>MAC Mail</li>
<li>Outlook Express 6</li>
<li>Windows Mail</li>
<li>Windows Live MAil</li>
<li>Microsoft Outlook 2003</li>
<li>Microsoft Outlook 2007</li>
<li>Microsoft Outlook 2010</li>
</ul>
</div>
<p>
<a href="#" class="hidden" onclick="return show_hide2(this)">Windows XP</a>
<div id="menu2" style="display: none;">
<ul>
<li>Microsoft Outlook 2003</li>
<li>Microsoft Outlook 2007</li>
<li>Microsoft Outlook 2010</li>
<li>MAC Mail</li>
<li>Outlook Express 6</li>
<li>Windows Mail</li>
<li>Windows Live MAil</li>
</ul>
</div>

Edited by shaya4207: n/a

0

thank you that has worked, but now the orginal format is back where its spaced out again

show menu

list

this is confusing lol thank you for your paitence

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.