...

View Full Version : dropdown menu.



Vernier
01-22-2012, 02:38 PM
Hey, I am attempting to make my navigation bar a dropdown menu.

This is my current code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#navigation_bar {
float:left;
width:100%;
background:#fff;
border-bottom:4px solid #000;
position:relative;
}
#navigation_bar ul {
clear:left;
float:right;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
text-align:center;
}
#navigation_bar ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
}
#navigation_bar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#navigation_bar ul li a:hover {
background:#369;
color:#fff;
}
#navigation_bar ul li a.active,
#navigation_bar ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HabFab V1</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://vis.im/player/embed?radioIp=193.33.186.20&radioPort=8110&div=radio_player&playIcon=http://habfab.com/v2/images/play.png&pauseIcon=http://habfab.com/v2/images/pause.png&volumeSlider=http://habfab.com/v2/images/volume-slider.png&volumeController=http://habfab.com/v2/images/volume.png&library=jquery&volumeStart=25"></script>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
</head>

<body>
<div id="container">
<div id="wrapper">
<div id="left">
<div id="banner_container">
<div id="navigation_bar">
<ul>
<li></li>
<li><a href="#" id="thehablets"></a>
</li>

<li><a href="http://habfab.com/v2/radio.html" id="radio"></a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
</ul>
</li>

<li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php', 'content_container');" id="news"></a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
</ul>
</li>

<li><a href="#" id="guides"></a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
</ul>
</li>

<li><a href="javascript:ajaxpage('/staffpanel/_frontend/events.php', 'content_container');" id="events"></a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
</ul>
</li>

<li><a href="#" id="media"></a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
</ul>
</li>

<li><a href="/staffpanel/_frontend/jobApps.php" id="jobs"></a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
</ul>
</li>

<li><a href="http://habfab.com/forum" id="forum"></a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
</ul>
</div>
<div id="banner"></div>
</div>
<div id="content_container">
<a href="#" id="advert1"></a>
<a href="../forum" id="advert2"></a>
<a href="#" id="advert3"></a>
<div class="content_top"></div>
<div class="content_background">
<div class="greyheader">&raquo; Welcome to HABFAB</div>
<div class="content_left">
<div class="content_left">
<p><img src="http://www.habbo.com/habbo-imaging/avatarimage?user=Vernier&amp;action=crr=6&amp;direction=34&amp;head_direction=35&amp;gesture=sml&amp;size=l" alt="" class="left"/>
</p>
<p class="grey"><strong>Welcome!</strong></p>
<p>Hello there, and welcome to HabFab. HabFab is owend by Vims and ran by a very busy Habbo called<a href="http://www.habbo.com/home/Vernier"> Vernier</a>.
Since he is a a busy person, he can’t run the website all on his own,
he has hired some very dedicated and hard working staff to help him to keep the website up and running! </p>
</div>
<hr class="seperator" />
<div class="content_left">
<img src="http://www.habbo.com/habbo-imaging/avatarimage?user=DJC4LLY&amp;action=wlk&amp;direction=36&amp;head_direction=35&amp;gesture=sml&amp;size=l" alt="" class="right" />
<h1 class="blue">HabFab FM</h1>
HabFab FM is soon to be up after some funding!, that will save Habbos’ from complete boredom.
We aim to keep this radio up and running 24/7 so habbos’ from all around the world will enjoy our entertainment.
Running a radio station is very hard work, so that’s why we hired <a href="http://www.habbo.com/home/DJC4LLY" class="blue">Cally</a> as our radio station manager.
If yo would like to apply to be a DJ, click here.</div>
<hr class="seperator" />
<div class="content_left">
<h1 class="pink">HabFab News &amp; Articles</h1>
<img src="images/misc/type.PNG" alt="type" class="right" />
Not only do we have a radio station, we also offer the latest Habbo & Real Life news & the latest music, film, book etc... reviews.
We aim to be the first to update you with the breaking news.
This department is ran by <a href="#" class="pink"> <strong><strong>Darkred</strong></strong></a>.
</div>
</div>
<div class="content_right">
<div class="content_right">
<img src="http://www.habbo.com/habbo-imaging/avatarimage?user=Vims&amp;action=std&amp;direction=36&amp;head_direction=35&amp;gesture=sml&amp;size=l" alt="" class="right" />
<h1 class="green">HabFab Discussion Boards</h1>
HabFab also has its very own forum! Known as the discussion boards around here.
It is a place you can chat and discuss about anything really, the forum is ran by Someone and his team of dedicated moderators!
<br /><br />
To register or visit the forum please click <a href="http://habfab.com/forum" class="green">here</a>!
</div>
<hr class="seperator" />
<div class="content_right">
<img src="images/misc/group.PNG" alt="Group" class="right" style="margin-top: 7px;"/>
<h1 class="orange">HabHab Group</h1>
Want to get more involved in the community? Why not join one of our group by clicking <a href="http://www.habbo.com/client?forwardId=2&amp;roomId=52538909" class="orange">here</a>.
</div>
<hr class="seperator" />
<div class="content_right">
<img src="images/misc/events.PNG" alt="events" class="right" />
<h1 class="grey">Today's Events</h1>
Below is a list of all the events, TheHablets is running today on Habbo. To view all the week’s events please click <a href="/staffpanel/_frontend/events.php" class="grey">here</a>.
<iframe src="/staffpanel/_frontend/eventsToday.php"></iframe>
</div>
</div>
</div>
<div class="content_bottom"></div>

<div class="disclaimer_top"></div>
<div class="disclaimer_background">
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="/support">Contact</a> |
<a href="#">Disclaimer</a> |
<a href="http://www.habbo.com">Habbo</a><br />
HabFab &copy; Copyrighted 2011<br />
Layout designed &amp; coded by Jake James
</div>
<div class="disclaimer_bottom"></div>

</div>
</div>

<div id="right">
<div id="right_container">
<div class="box_top"></div>
<div id="radio_player">
<div class="box_background">
</div>

<div class="box_bottom">
</div>
</div>
<div class="box_top"></div>
<div class="box_background">
<div class="shade">


</div>
<div class="box_bottom"></div>
</div>

<div class="box_top"></div>
<div class="box_background">
<img src="images/misc/albumart.PNG" alt="Album Art" align="right" style="margin-top: 5px; margin-right: 5px;" />
<div class="nonshade">
<strong>Current DJ:</strong><br />
<span id="cc_stream_info_title"></span><br /></div>
<div class="shade">
<strong>Listener Count:</strong><br />
<span id="cc_stream_info_listeners"></span><br /></div>
<div class="nonshade">
<strong>Now Playing:</strong><br />
<span id="cc_stream_info_song"></span><br /></div>

<div class="shade">
<div id="djsays">
<script type="text/javascript">
ajaxpage('/staffpanel/_frontend/djSays.php', 'djsays')
</script>
</div>
</div>
</div>
<div class="box_bottom" style="margin: 0;"></div>

<div id="right_bottom"></div>
<div id="inner_right">
<div id="radio_box">
<div class="radio_box_top"></div>

<div class="radio_box_background">

</div>
<div class="radio_box_bottom"></div>
</div>
<div class="box2_top"></div>
<div class="box2_background">
<div class="blueheader">&raquo; DJ Of The Week</div>
<iframe src="/staffpanel/_frontend/" width="230"></iframe>
</div>
<div class="box2_bottom"></div>

<div class="box2_top"></div>
<div class="box2_background">
<div class="pinkheader">&raquo; Featured Content</div>
<img src="images/misc/featured.PNG" alt="Featured Content" class="right" />
Have you checked outHabFab's Helpdesk yet? No? Have you been living in a cave!? Search <a href="http://www.habbo.com/home/Vernier" class="pink">Vernier </a> on Habbo to acess the room!
</div>
<div class="box2_bottom"></div>

<div class="box2_top"></div>
<div class="box2_background">
<div class="greenheader">&raquo; Member of the month</div>
<p><img src="images/misc/knifecrime.PNG" alt="Knife Crime" class="left" />There currently is not a member been chosen here...</p>
</div>
<div class="box2_bottom"></div>
</div>

</div>

</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="http://shoutcast.zfast.co.uk/system/streaminfo.js"></script>
<script language="javascript" type="text/javascript" src="http://shoutcast.zfast.co.uk/js.php/habfab/streaminfo/rnd0"></script></body>
</html>


however whenever i use this code, my webpage looks like this: http://habfab.com/v2/

What do i need to edit to make it work? Thanks guys :)

~ David

Frankie
01-22-2012, 05:28 PM
Structurally speaking, your menu functions OK in FF7, but here's a tutorial on how to create a cross-browser drop-down menu: How to Create a Drop-Down/Fly-Out Menu with CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-make-a-menu-with-css.php). With much less/easier code than you are using now.

I would suggest to start with that. Any remaining problems, assuming you followed the (few) steps, I'll be happy to help with here.

Faimos
01-22-2012, 09:36 PM
This works in Chrome and FF9

It's not a very efficient script though. I would recommend using the tutorial linked above.

Also, just as far as styling I would recommend you make the links less transparent as they are quite difficult to read when they aren't being hovered over.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum