Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: Navigation +REP

  1. 02-11-2008, 06:40 PM #11
    Kupen
    Kupen is offline Newbie
    Join Date
    Jun 2008
    Posts
    72
    Tokens
    0

    Default

    ty soo much it works perfect now +REP for u
    Reply With Quote Reply With Quote
  2. 02-11-2008, 06:44 PM #12
    Earthquake's Avatar
    Earthquake
    Earthquake is offline Habbox God
    Join Date
    Feb 2007
    Location
    London
    Posts
    6,722
    Tokens
    3,902
    Habbo
    welldonemate

    Latest Awards:

    17 Year Milestone 5000 Posts Habbox God
    Total Awards: 4

    Default

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

    EXAMPLE

    not like this

    EXAMPLE 2
    (H)
    Reply With Quote Reply With Quote
  3. 02-11-2008, 07:26 PM #13
    Iszak
    Iszak is offline Junior Member
    Join Date
    Oct 2008
    Posts
    236
    Tokens
    0

    Default

    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.

    Code:
    <!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
    Last edited by Meti; 07-11-2008 at 10:37 PM.
    Reply With Quote Reply With Quote
  4. 02-11-2008, 07:29 PM #14
    HabbDance's Avatar
    HabbDance
    HabbDance is offline Greater Member
    Join Date
    Sep 2008
    Posts
    718
    Tokens
    0

    Default

    Izsak save's the day again. Your menu's nice though. But you could have just went to dynamic drive :s
    +.net - omg it's coming o_o
    Reply With Quote Reply With Quote
  5. 02-11-2008, 07:32 PM #15
    Iszak
    Iszak is offline Junior Member
    Join Date
    Oct 2008
    Posts
    236
    Tokens
    0

    Default

    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.
    Reply With Quote Reply With Quote
  6. 02-11-2008, 07:45 PM #16
    HabbDance's Avatar
    HabbDance
    HabbDance is offline Greater Member
    Join Date
    Sep 2008
    Posts
    718
    Tokens
    0

    Default

    Quote Originally Posted by Iszak View Post
    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!
    +.net - omg it's coming o_o
    Reply With Quote Reply With Quote
  7. 07-11-2008, 05:35 AM #17
    Cushioned's Avatar
    Cushioned
    Cushioned is offline Senior Member
    Join Date
    May 2008
    Posts
    1,160
    Tokens
    11

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    You really could have just gotten the script from dynamic drive again and just edited it and it would have worked
    Previously a Habbo fanatic, web designer/developer, fansite owner, & trusted member of the community.
    Reply With Quote Reply With Quote
  8. 10-11-2008, 04:33 PM #18
    UniqueHabbo
    UniqueHabbo is offline Junior Member
    Join Date
    Aug 2008
    Posts
    206
    Tokens
    0

    Default

    Quote Originally Posted by Iszak View Post
    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.

    Code:
    <!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.
    Reply With Quote Reply With Quote
Page 2 of 2 FirstFirst 12
« Previous Thread | Next Thread »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules