www.webdeveloper.com
Results 1 to 5 of 5

Thread: DropLine menu?! help please!

  1. #1
    Join Date
    Apr 2009
    Posts
    4

    DropLine menu?! help please!

    Hi,

    First of all, any help is greatly appreciated!
    And i will look forward to hearing your responses

    To start, i am working on a staff training website within my work place.
    And bassically i am trying to create a drop line menu at the top.

    How it will look - - http://kronikstudios.co.uk/example.jpg

    Now.... in that image, you can see the line of link underneath the main buttons, yes?

    Well that is where i want my drop line to display. I want to be able to hover over a link (i.e. general training) and it shows sub nav below it.
    Then move your mouse off and it dissapears, or move to another link and shows a different sub nav.

    Currently i've got it working onClick, but it simply isnt good enough, and every hover method i've tried just doesnt seem to work.

    Not sure if this is a Javascript question or CSS.
    So ive posted in both.

    Regards,
    Tom Thorley
    Last edited by Fang; 04-06-2009 at 10:32 AM. Reason: corrected url

  2. #2
    Join Date
    Apr 2009
    Posts
    4

    Drop Line Menu, any help please??

    Hi,

    First of all, any help is greatly appreciated!
    And i will look forward to hearing your responses

    To start, i am working on a staff training website within my work place.
    And bassically i am trying to create a drop line menu at the top.

    How it will look - - http://www.kronikstudios.co.uk/example.jpg

    Now.... in that image, you can see the line of link underneath the main buttons, yes?

    Well that is where i want my drop line to display. I want to be able to hover over a link (i.e. general training) and it shows sub nav below it.
    Then move your mouse off and it dissapears, or move to another link and shows a different sub nav.

    Currently i've got it working onClick, but it simply isnt good enough, and every hover method i've tried just doesnt seem to work.

    Not sure if this is a Javascript question or CSS.
    So ive posted in both.

    Regards,
    Tom Thorley

  3. #3
    Join Date
    Dec 2008
    Location
    Denver, Colorado
    Posts
    390
    Check out this example and see if it helps...

    http://www.cssplay.co.uk/menus/dd_valid_2.html

  4. #4
    Join Date
    Apr 2009
    Posts
    4

    cheers.... but no

    hmm.... i had alook at this website.... everything is to formatted on it!

    Once i start removing the styles (how it looks) the whole script messes up and doesnt work.

    I want flexibility to make it look how it looks in the image i have attached.

    Regards,

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Suckerfish dropdown horizontal
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    
    <head>
    <title>Suckerfish Dropdowns - One Level Bones</title>
    
    <style type="text/css">
    
    body {
    	font-family: arial, helvetica, serif;
    }
    
    #nav, #nav ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    }
    
    #nav li { /* all list items */
    	float: left;
    	width: 10em !important; width: auto; /* width needed or else Opera goes nuts. Width auto is for IE6 */
    }
    
    #nav li ul { /* second-level lists */
    	position: absolute;
    	background: orange;
    	/* width: 10em; */
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    	/* left:auto; */
       left: 0;
       float:left;
    }
    
    #content {
    	clear: left;
    	color: #ccc;
    }
    
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    
    </head>
    
    <body>
    
    <h1>PERCIFORMES! (1)</h1>
    <p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>
    
    <ul id="nav">
    
    	<li><a href="#">Percoidei</a>
    		<ul>
    			<li><a href="#">Remoras</a></li>
    
    			<li><a href="#">Tilefishes</a></li>
    			<li><a href="#">Bluefishes</a></li>
    			<li><a href="#">Tigerfishes</a></li>
    
    		</ul>
    	</li>
    
    	<li><a href="#">Anabantoidei</a>
    
    		<ul>
    			<li><a href="#">Climbing perches</a></li>
    			<li><a href="#">Labyrinthfishes</a></li>
    			<li><a href="#">Kissing gouramis</a></li>
    			<li><a href="#">Pike-heads</a></li>
    			<li><a href="#">Giant gouramis</a></li>
    
    		</ul>
    	</li>
    
    	<li><a href="#">Gobioidei</a>
    		<ul>
    			<li><a href="#">Burrowing gobies</a></li>
    			<li><a href="#">Dartfishes</a></li>
    
    			<li><a href="#">Eellike gobies</a></li>
    			<li><a href="#">Gobies</a></li>
    			<li><a href="#">Loach gobies</a></li>
    			<li><a href="#">Odontobutidae</a></li>
    			<li><a href="#">Sandfishes</a></li>
    			<li><a href="#">Schindleriidae</a></li>
    
    			<li><a href="#">Sleepers</a></li>
    			<li><a href="#">Xenisthmidae</a></li>
    		</ul>
    	</li>
    
    </ul>
    
    <div id="content">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
    
    	<p><a href="/articles/suckerfish/dropdowns/">Suckerfish Dropdowns</a> by <a href="/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net">Dan Webb</a>.</p>
    </div>
    
    </body>
    
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.09651 seconds
  • Memory Usage 2,891KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates