PDA

View Full Version : [REP] What dropdown menu script are..



Jahova
26-07-2008, 07:16 AM
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
26-07-2008, 08:56 AM
<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
26-07-2008, 09:59 AM
There using this javascript frame work to make the menu work

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

Jahova
26-07-2008, 10:02 AM
I think I need the javascript aswell.
Thanks for trying.

Tom-743
26-07-2008, 10:07 AM
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
26-07-2008, 10:31 AM
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
26-07-2008, 02:33 PM
Here:

http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm

Stepheen
26-07-2008, 02:51 PM
http://www.dynamicdrive.com/dynamicindex1/dropdowncontrol.htm

There you go :).

Jahova
26-07-2008, 02:52 PM
Wrong, take a look at clubhabbo.net.
Can someone get me some working code, as the ones above aren't working.

Stepheen
26-07-2008, 02:56 PM
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.

Jahova
26-07-2008, 02:59 PM
I meant the clubhabbo one, I want it pre-done with the css and shiz.
I just want to do new images and make it easy, I'm lazy, you see..

wsg14
26-07-2008, 03:04 PM
It seems as if you're making a fansite. If you're too lazy to do this then your fansite is a failure.

Jahova
26-07-2008, 03:39 PM
I'm not making a fansite, actually.
Look, I'm new to Javascript and Divs and I just want a break from the learning to see how others do it.

All I need is for someone to RIP clubhabbo.net's navigation script and get it working, I can't seem to get it working properly =[

wsg14
26-07-2008, 03:47 PM
Oh, I see.

Just copy the ones I posted. As I cba to copy ClubScabbos for you.

Jahova
26-07-2008, 04:08 PM
Aha, I was missing somthing.
Thanks once again guys =D

THREAD unofficialy CLOSED

Want to hide these adverts? Register an account for free!