Navigation +REP [Archive]

Kupen

30-10-2008, 10:11 PM

ive got my navigation but when you open the page it looks like this

http://img128.imageshack.us/img128/9089/pic1vp6.png

http://img128.imageshack.us/my.php?image=pic1vp6.png (check the link cos the pic won't open)

i want it closed or only one open to start

also i can open all of them at once and i only want one to be open at once

Thread moved from 'Technical Problems' by Yoshimitsui (Super Moderator): Please post in the correct section in future.

Fixed image by Meti (Forum Moderator)

iDenning

30-10-2008, 10:27 PM

I like it alot, can i see the coding for it as i might be able to help you out ;)

scottish

30-10-2008, 10:36 PM

Should be in web designing.

Edited by Meti (Forum Moderator): Please do not tell users that they have broken the forum rules, instead report the post using the report post button.

Kupen

30-10-2008, 10:39 PM

iDenning

30-10-2008, 11:01 PM

Mess about with images name, perhaps use png and not PNG try just using /IMAGE/DIRECTORY too? Just have a fiddle :P

Kupen

31-10-2008, 07:30 AM

that won't help, theres something wrong with the coding

Jxhn

31-10-2008, 08:21 AM

Firstly the <div id="content"> should be around the whole menu. Secondly the divs on the menu are completely messed up, you have 7 opening tags, but only 4 closing tags. You need to rewrite it so that each submenu is surrounded by one div.

<div id="cont">

<img alt="" align="middle" src="../images/Navigation/Habbplanet.PNG" onmouseout="ChangeClass('menu1','menuOut')" onmouseover="ChangeClass('menu1','menuOver')" onClick="SwitchMenu('sub6')" width="197" height="20" /><br />
<div class="submenu" id="sub6" align="center">
<span class="style1">
<a target="main" href="http://habbplanet.com">Homepage</a>
</span><br />
<a target="main" href="#">Meet The Team</a><br />
<a target="main" href="#">About Us</a><br />
<a target="main" href="#">Disclaimer</a><br />
<a href="#" target="main" class="style1">Contact Us</a>
</div>

<img alt="" src="../images/Navigation/Community.PNG" onClick="SwitchMenu('sub7')" width="197" height="20" /><br />
<div class="submenu" id="sub7" align="center">
<a target="main" href="#">Song Of The Week</a><br />
<a target="main" href="#">Weekly Competiton </a><br />
<a target="main" href="#">Weekly Poll </a><br />
<a target="main" href="#">Weekly Newsie</a><br />
<a target="main" href="#">Join The Group!</a><br />
<a target="main" href="#">Status Signatures</a><br />
<a target="main" href="#">Events Schedule</a><br />
<a target="main" href="#">Habbo Imager</a><br />
</div>

<img alt="" src="../images/Navigation/radio.PNG" onClick="SwitchMenu('sub3')" width="197" height="20" /><br />
<div class="submenu" id="sub3" align="center">
<a target="main" href="#">Requests & Shoutouts</a><br />
<a target="_blank" href="#">Timetable</a><br />
<a target="main" href="#">Regular Shows</a><br />
<a target="main" href="#">DJ Applications</a>
</div>

<img alt="" align="middle" src="../images/Navigation/Goodies.PNG" onClick="SwitchMenu('sub9')" width="197" height="20" />
<div class="submenu" id="sub9" align="center"><br />
<a target="main" href="#">Habbo Imager </a><br />
<a target="main" href="#">Display Pics </a><br />
<a target="main" href="#">Backgrounds</a><br />
<a target="main" href="#">Downloads</a><br />
</div>

<img alt="" src="../images/Navigation/Guides.PNG" onClick="SwitchMenu('sub2')" width="197" height="20" /><br />
<div class="submenu" id="sub2" align="center">
<a target="main" href="#">Habbo Club Guide</a><br />
<a target="main" href="#">Editing Your Habbo Look!</a><br />
<a target="main" href="#">Habbo Games</a><br />
<a target="main" href="#">Habbo X Guide </a><br />
</div>

<img alt="" src="../images/Navigation/Forum.PNG" onClick="SwitchMenu('sub1')" width="197" height="20" /><br />
<div class="submenu" id="sub1" align="center">
<a target="_blank" href="#">Visit Forum</a><br />
<a target="main" href="#">Register Now!</a>
</div>

</div>
</body>
</html>

That should hopefully fix the menu. It looks like you've been using a bad html editor. You have html before the doctype and you have numerous body and head tags.

Kupen

31-10-2008, 01:52 PM

i have been mixing things around with dreamweaver

Kupen

31-10-2008, 01:58 PM

only one menu opens now when u click but when u first open the page they are all open but when u close them and try to open more than 1 only 1 is there which is what i want,

i just want to figure out how to make them all closed when u first open the page

Edited by Meti (Forum Moderator): Please do not double post, when you simply can edit your first post.

Jxhn

02-11-2008, 04:53 PM

only one menu opens now when u click but when u first open the page they are all open but when u close them and try to open more than 1 only 1 is there which is what i want,

i just want to figure out how to make them all closed when u first open the page

Edited by Meti (Forum Moderator): Please do not double post, when you simply can edit your first post.

Sorry, forgot about that.

Add

.submenu
{
display: none;
}
under </style>

Kupen

02-11-2008, 06:40 PM

ty soo much it works perfect now +REP for u

Earthquake

02-11-2008, 06:44 PM

I think you should post the navigation drop down menu test like this

EXAMPLE

not like this

EXAMPLE 2

Iszak

02-11-2008, 07:26 PM

Just incase you wanted it, I whiped up a super simple menu, it uses sliding effects, nice clean code easy to understand if you know jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>jQuery Slider Menu</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.submenu').hide();

$('.link').click(function(){
var submenu = $(this).parent().children().filter('ul');

if (submenu.css('display') == 'none')
{
$('.submenu').slideUp('slow');
submenu.slideDown('slow');
}

else
{
submenu.slideUp('slow');
}
});
});
</script>

<style type="text/css">
html
{
border: 0;
overflow: auto;
}

body
{
margin: 0;
padding: 0;
font-size: x-small;
font-family: Verdana;
}

a
{
outline: none;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

.link
{
color: #000;
padding: 2px 0;
font-weight: bold;
text-decoration: none;
}

.submenu li
{
padding-left: 5px;
}
</style>

</head>
<body>

<ul id="menu">
<li class="li">
<a href="#" class="link">Home</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">Radio</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">News</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">Community</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">Goodies</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>

</body>
</html>

or if you want to see an example http://pastebin.me/490dfe7b3a18f

Merged by Meti (Forum Moderator): Due to forum lag

HabbDance

02-11-2008, 07:29 PM

Izsak save's the day again. Your menu's nice though. But you could have just went to dynamic drive :s

Iszak

02-11-2008, 07:32 PM

HabbDance, yes I agree but by using a javascript framework be it jQuery, prototype, mootools, dojo, YUI Tools etc it allows you to get an understanding of javascript without having to figure out all the cross-browser methods - the frameworks have done that for you already. Yes frameworks are large in bytes, so often when you use a framework commit to it and use it a lot. Just my advice.

HabbDance

02-11-2008, 07:45 PM

HabbDance, yes I agree but by using a javascript framework be it jQuery, prototype, mootools, dojo, YUI Tools etc it allows you to get an understanding of javascript without having to figure out all the cross-browser methods - the frameworks have done that for you already. Yes frameworks are large in bytes, so often when you use a framework commit to it and use it a lot. Just my advice.
:[ I'll need a dictionary to decode this post!

Cushioned

07-11-2008, 05:35 AM

You really could have just gotten the script from dynamic drive again and just edited it and it would have worked :P

UniqueHabbo

10-11-2008, 04:33 PM

Just incase you wanted it, I whiped up a super simple menu, it uses sliding effects, nice clean code easy to understand if you know jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>jQuery Slider Menu</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.submenu').hide();

$('.link').click(function(){
var submenu = $(this).parent().children().filter('ul');

if (submenu.css('display') == 'none')
{
$('.submenu').slideUp('slow');
submenu.slideDown('slow');
}

else
{
submenu.slideUp('slow');
}
});
});
</script>

<style type="text/css">
html
{
border: 0;
overflow: auto;
}

body
{
margin: 0;
padding: 0;
font-size: x-small;
font-family: Verdana;
}

a
{
outline: none;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

.link
{
color: #000;
padding: 2px 0;
font-weight: bold;
text-decoration: none;
}

.submenu li
{
padding-left: 5px;
}
</style>

</head>
<body>

<ul id="menu">
<li class="li">
<a href="#" class="link">Home</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">Radio</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">News</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">Community</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<a href="#" class="link">Goodies</a>
<ul class="submenu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>

</body>
</html>

or if you want to see an example http://pastebin.me/490dfe7b3a18f

Merged by Meti (Forum Moderator): Due to forum lag
+rep LOL.

You're a real nice guy.