[REP] What dropdown menu script are..

[Jahova]

http://clubhabbo.net/ using?
I want to use it for my site.
Also, if you could directly rip it from their site, that would be great.
[No, I'm not going to take the style], I just want to see how they have done the CSS.

- Tom

Moved by Invent (Forum Moderator) from Designing & Development: Please post in the correct forum next time, thanks .

[Janczyk]

<div class="menuitem" onMouseOver="dropdown('clubhabbo')" onMouseOut="dropout('clubhabbo')">
<span id="trigger">CLUBHABBO</span>
<div class="subnav" id="menu-clubhabbo">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink"><a href="home.php" target="content">Home</a></div>
<div class="navlink offset"><a href="clubhabbo/staff.html" target="content">Staff</a></div>
<div class="navlink"><a href="clubhabbo/contact.php" target="content">Contact Us</a></div>
<div class="navlink offset"><a href="clubhabbo/about.html" target="content">About ClubHabbo</a></div>
<div class="navlink"><a href="clubhabbo/faq.html" target="content">Frequently Asked Questions</a></div>
<div class="navlink offset"><a href="clubhabbo/alterations.html" target="content">Alterations</a></div>
<div class="navlink"><a href="clubhabbo/linkus.html" target="content">Link ClubHabbo</a></div>
<div class="navlink offset"><a href="clubhabbo/archive.php" target="content">ClubHabbo Headlines Archive</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem" onMouseOver="dropdown('news')" onMouseOut="dropout('news')">
<span id="trigger">NEWS</span>

<div class="subnav" id="menu-news">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink"><a href="news/uknews.php" target="content">Habbo UK News</a></div>
<div class="navlink offset"><a href="news/internationalnews.php" target="content">Habbo International News</a></div>
<div class="navlink"><a href="news/rlnews.php" target="content">Real World News</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem" onMouseOver="dropdown('community')" onMouseOut="dropout('community')">
<span id="trigger">COMMUNITY</span>

<div class="subnav" id="menu-community">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink"><a href="community/polls.php" target="content">Polls</a></div>
<div class="navlink offset"><a href="community/donators.php" target="content">Donators List</a></div>
<div class="navlink"><a href="community/competitions.php" target="content">Competitions</a></div>
<div class="navlink offset"><a href="community/group.html" target="content">Groups</a></div>
<div class="navlink"><a href="community/lottery.php" target="content">Monthly Lottery</a></div>
<div class="navlink offset"><a href="community/tictactoe.html" target="content">Tic Tac Toe</a></div>
<div class="navlink"><a href="community/lgen.html" target="content">Love Calculator</a></div>
<div class="navlink offset"><a href="community/dotsandboxes.html" target="content">Dots & Boxes</a></div>
<div class="navlink"><a href="community/snake.html" target="content">Snake</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem" onMouseOver="dropdown('radio')" onMouseOut="dropout('radio')">
<span id="trigger">RADIO</span>

<div class="subnav" id="menu-radio">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink"><a href="radio/requests.php" target="content">Request Line</a></div>
<div class="navlink offset"><a href="radio/djotw.php" target="content">DJ of the Week</a></div>
<div class="navlink"><a href="radio/timetable.php" target="new">Timetable</a></div>
<div class="navlink offset"><a href="radio/linkradio.html" target="content">Use our Radio</a></div>
<div class="navlink"><a href="radio/problems.html" target="content">Problems with the Radio?</a></div>
<div class="navlink offset"><a href="radio/djapps.php" target="content">Radio DJ Applications</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem" onMouseOver="dropdown('habbo')" onMouseOut="dropout('habbo')">
<span id="trigger">HABBO GUIDES</span>

<div class="subnav" id="menu-habbo">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink offset"><a href="habbo/gguide.html" target="content">Habbo Guiding Guide</a></div>
<div class="navlink"><a href="habbo/xguide.html" target="content">Habbo X Guide</a></div>
<div class="navlink offset"><a href="habbo/badges.html" target="content">Badge List</a></div>
<div class="navlink"><a href="habbo/pets.html" target="content">Pets Guide</a></div>
<div class="navlink offset"><a href="habbo/tips.html" target="content">Tips & Tricks</a></div>
<div class="navlink"><a href="habbo/hcguide.html" target="content">Habbo Club Guide</a></div>
<div class="navlink offset"><a href="habbo/sunterrace.html" target="content">Sun Terrace VIP Guide</a></div>
<div class="navlink"><a href="habbo/camera.html" target="content">Camera Guide</a></div>
<div class="navlink offset"><a href="habbo/ecotron.html" target="content">Ecotron Guide</a></div>
<div class="navlink"><a href="habbo/exchange.html" target="content">Habbo Exchange Guide</a></div>
<div class="navlink offset"><a href="habbo/diving.html" target="content">Diving Guide</a></div>
<div class="navlink"><a href="habbo/snowstorm.html" target="content">Snowstorm Guide</a></div>
<div class="navlink offset"><a href="habbo/battleball.html" target="content">Battleball Guide</a></div>
<div class="navlink"><a href="habbo/wobblesquabble.html" target="content">Wobble Squabble Guide</a></div>
<div class="navlink offset"><a href="habbo/offices.html" target="content">The Habbo Offices</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem" onMouseOver="dropdown('goodies')" onMouseOut="dropout('goodies')">
<span id="trigger">GOODIES</span>

<div class="subnav" id="menu-goodies">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink"><a href="goodies/sig.html" target="content">Status Signatures</a></div>
<div class="navlink offset"><a href="goodies/imager.php" target="content">Habbo Imager</a></div>
<div class="navlink"><a href="goodies/downloads.html" target="content">Random Downloads</a></div>
<div class="navlink offset"><a href="goodies/banners.html" target="content">Homepage Banners</a></div>
<div class="navlink"><a href="goodies/catalogue.html" target="content">Catalogue Headers</a></div>
<div class="navlink offset"><a href="goodies/newsheaders.html" target="content">News Headers</a></div>
<div class="navlink"><a href="goodies/bg.html" target="content">Backgrounds</a></div>
<div class="navlink offset"><a href="goodies/hotelhomepage.html" target="content">Hotel View Headers</a></div>
<div class="navlink"><a href="goodies/fontgen.html" target="content">Habbo Font Generator</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem" onMouseOver="dropdown('bb')" onMouseOut="dropout('bb')">
<span id="trigger">BIG BROTHER</span>

<div class="subnav" id="menu-bb">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink"><a href="brother/portal.html" target="content">Habbo Big Brother Portal</a></div>
<div class="navlink offset"><a href="news/bones.php" target="content">The Bruv Scale</a></div>
<div class="navlink"><a href="news/bbnews.php" target="content">Latest News and Updates</a></div>
<div class="navlink offset"><a href="news/bbnewsT.php" target="content">Task Recaps and Updates</a></div>
<div class="navlink"><a href="news/bbnewsD.php" target="content">Diary Room Recaps and Updates</a></div>
<div class="navlink offset"><a href="brother/video.html" target="content">Video Highlights</a></div>
<div class="navlink"><a href="brother/beareporter.html" target="content">Be A Reporter</a></div>
<div class="navlink offset"><a href="brother/who.html" target="content">Who's Who in Habbo BB</a></div>
<div class="navlink"><a href="brother/date.html" target="content">Make A Date</a></div>
<div class="navlink offset"><a href="brother/goodies.html" target="content">Habbo Big Brother Goodies</a></div>
<div class="navlink"><a href="brother/discuss.html" target="content">Discussion and Threads</a></div>
<div class="navlink offset"><a href="community/polls.php" target="content">Bruv Polls</a></div>
<div class="navlink"><a href="brother/eviction.html" target="content">Eviction Timeline</a></div>
<div class="navlink offset"><a href="brother/mouth.html" target="content">Big Brother's Big Mouth</a></div>
<div class="navlink"><a href="brother/interviews.html" target="content">Contestant Interviews</a></div>
<div class="navlink offset"><a href="brother/competitions.html" target="content">Competitions</a></div>
<div class="navlink"><a href="brother/draw.html" target="content">Lucky Prize Draw</a></div>
<div class="navlink offset"><a href="brother/mill.html" target="content">Frank's Rumour Mill</a></div>
<div class="navlink"><a href="brother/question.html" target="content">The Fortune Teller</a></div>
<div class="navlink offset"><a href="brother/radio.html" target="content">Radio Shows</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem"><a href="community/events.php" target="content">EVENTS</a></div>

<div class="menuitem" onMouseOver="dropdown('awards')" onMouseOut="dropout('awards')">
<span id="trigger">AWARDS</span>

<div class="subnav" id="menu-awards">
<div class="subnav-top"></div>
<div class="subnav-mid">
<div class="navlink"><a href="community/awards/introduction.html" target="content">About The Awards</a></div>
<div class="navlink offset"><a href="community/awards/prizes.html" target="content">Prizes</a></div>
<div class="navlink"><a href="community/awards/nominate.php" target="content">Nominate Now</a></div>
</div>
<div class="subnav-foot"></div>
</div>
</div>

<div class="menuitem"><a href="http://www.clubhabboforum.net" target="_blank">FORUM</a></div>

</div>

.subnav
{
    position: absolute;
    top: 13px;
    left: 0px;
    z-index: 1000;
    color: #000000;
    position: absolute;
    display: none;
}
.subnav-top
{
    background-image: url(../images/topmenu.png);
    background-position: top;
    height: 6px;
    width: 220px;
    line-height: 6px;
}
.subnav-mid
{
    background-image: url(../images/topmenu.png);
    background-position: 0px -4px;
    width: 210px;
    padding-left: 5px;
    padding-right: 5px;
}
.subnav-foot
{
    background-image: url(../images/topmenu.png);
    background-repeat: repeat;
    background-position: bottom;
    height: 7px;
    width: 220px;
    line-height: 7px;
}
.navlink
{
    padding: 5px;
    background: #f6f6f6;
}
.navlink.offset
{
    background: none;
}
.navlink a
{
    color: #111;
    font-weight: normal;
    text-decoration: none;
}
.foot
{
    width: 881px;
    height: 9px;
    background-image: url(../images/foot.png);
}

Direct from CH

Not sure whether that is it though.

[Tom-743]

There using this javascript frame work to make the menu work

http://clubhabbo.net/files/prototype.js

[Jahova]

I think I need the javascript aswell.
Thanks for trying.

[Tom-743]

Do what Arshavin said and then add this to the <head> section of the page;

<script type="text/javascript" src="http://clubhabbo.net/files/prototype.js"></script>

Download the file and save it in your website folder if u don't wanna be hotlinking ClubHabbo.

[Jahova]

I never read your post, thanks =D
Hmmz, it seems to be mucked up.
-
Can anyone find a tutorial on dynamic drive on this 'prototype.js dropdown menu'?

[wsg14]

Here:

http://www.dynamicdrive.com/dynamici...switchmenu.htm
http://www.dynamicdrive.com/dynamici...witchmenu2.htm

[Stepheen]

http://www.dynamicdrive.com/dynamici...owncontrol.htm

There you go .

[Jahova]

Wrong, take a look at clubhabbo.net.
Can someone get me some working code, as the ones above aren't working.

[Stepheen]

Wrong, take a look at clubhabbo.net.
Can someone get me some working code, as the ones above aren't working.

The one above does work, you have to edit it like other people do.