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
Jump to Post<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.
Jump to PostThe 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 …
Jump to PostI'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>
Jump to PostThat's what the last reply with the CSS was for, please have a look at it
Jump to PostEverything 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'; …
<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.
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
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>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
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>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
That's what the last reply with the CSS was for, please have a look at it
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>
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>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
My pleasure, enjoy coding...
P.S. Please make this 'Solved'...
sure thing just one last thing
do you now how to do frames in css
What do you mean 'frames'?
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
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>and how would i create this distinct id as you can see im really new at it, my website if you want to check it out is for my work, www.windstreamsupport.webs.com/homepage.html
and im new to css but html i know
My point was that they should have different ids (e.g. menu1, menu2)
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
Where it says #menu (in the CSS) change it to #menu1,#menu2
thank you thank you thank you thank you
My pleasure
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.