Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: dropdown menu.

  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    dropdown menu.

    Hey, I am attempting to make my navigation bar a dropdown menu.

    This is my current code:

    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

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    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. 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.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New Coder
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this 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
    •