Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    which is better , i know js can be disabled..

    i just would like to here a few opinions on which they think is the best way to build a simple drop menu

  2.  

  3. #2
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    HTML/CSS, because as you said, js can be turned off, which renders your navigation useless.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  4. #3
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    thx chris

  5. #4
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    If you want to go with js, then go for it. I haven't came across many people with js turned off, but I would make sure that there is an alternate way to get to the pages that you have listed in the js based nav.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  6. #5
    Member cctech's Avatar
    Join Date
    Jul 2007
    Location
    North Carolina Coast
    Posts
    70
    Member #
    15488
    Right now, we mostly go with JS and alternate navigation in the footer and that is mainly because you still can't quite get the same visual effects using just CSS (but that will probably change very soon). Now if we saw stats that showed big numbers of people were surfing with JS turned off, we would surely go to CSS.

    In addition, if SEO is a major issue with a particular site, we go w/ CSS.

    For a simple drop menu, here is a site that we frequent for anything related to CSS:
    http://www.cssplay.co.uk/menus/

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yes, I think the biggest benefit over the possibility of JS being turned off is that CSS-based menus encourage a very defined, semantic structure in your actual menu markup, plus they ensure all of your links are actually on the page (for search engines and screen readers).

    cctech -- there's little standing in the way of writing some sort of JS script that provides progressive enhancement, making your CSS menus acquire the additional traits you want through some unobtrusive scripting.

  8. #7
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Yup, cctech. Use a CSS menu, and you can style it further with JS. There's nothing really in the way.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  9. #8
    Member cctech's Avatar
    Join Date
    Jul 2007
    Location
    North Carolina Coast
    Posts
    70
    Member #
    15488
    Thanks for the direction! Can you show me an example of this in action?

    Thanks

  10. #9
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    It depends on what behavior you want. Most libraries provide some quick way to select something... jQuery, my pick, has its own selector engine. Once elements are selected, you can manipulate them in whatever way you want.

    Usually the behavior isn't something more than animating the background color, or perhaps the left padding or border. This can usually be done with a single function.

    What specific JS thing do you want?

    Example - using jQuery to animate the left padding for elements:

    Code:
    $(document).ready(function() {
    		$("#submenu a").hover(function(){
    			$(this).animate({
    				paddingLeft: 15,
    				width: 180
    			}, 70);
    		},function(){
    			$(this).animate({
    				paddingLeft: 5,
    				width: 190
    			}, 70);
    		})
    });
    HTML Code:
    <div id="submenu">
    	<ul>
    		<li><a href="">Menu Item</a></li>
    		<li><a href="">Menu Item</a></li>
    		<li><a href="">Menu Item</a></li>
    		<li><a href="">Menu Item</a></li>
    		<li><a href="">Menu Item</a></li>
    	</ul>
    </div>
    I think its quite self-explanatory. The width is also animated to make up for the padding.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  11. #10
    Member cctech's Avatar
    Join Date
    Jul 2007
    Location
    North Carolina Coast
    Posts
    70
    Member #
    15488
    You're right, Steax. It is pretty self-explanatory. We will certainly have to play around with this. Thanks for the info .,


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:49 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com