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