SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to create

    Hi,

    What would be the best way to create this navigation bar?



    I came a across a tutorial a few weeks back that created a navigation bar similar to this using image maps but I can't seem to find it now.

    Thanks.
    Michael

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Image maps are outdated and not very accessible. That can easily be done with a standard unordered list of links, one small background image and some negative margins.

  3. #3
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the easiest way is to use flash..

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kantush View Post
    the easiest way is to use flash..
    Not if you need to use a screen reader to navigate web pages..

    Not if you want search engines to index your site..

  5. #5
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Not if you need to use a screen reader to navigate web pages..

    Not if you want search engines to index your site..
    Well, first of all flash are indexed to some extent if you do it right and secondly you can easily use flash in menus and get around seo and other obstacles by optimizing your site properly and smartly. Need help with SEO? Please PM me..

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm with Centauri - much easier and more accessible to use a list and a background image.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Certainly read these ones:

    css dot maxdesign dot com dot au slash listamatic slash index dot htm

    (sorry, couldn't post the link because of the message: "Only members with 10 posts or more can post website links or email addresses."
    I'm a newbie here)

    Good tutorial !

  8. #8
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, Im with Centauri.

    Flash has its place, that place is not navigation A Flash based menu will never work as well as a pure XHTML and CSS one, particulary with regards to accessibility and SEO.
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm with Centauri.
    Personally I don't like flash.

    I've got it set up using image maps for now, i'll change it to Centauri suggestion a bit further down the line.

  10. #10
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kantush View Post
    the easiest way is to use flash..


    I can code this list for a small fee :P

    Even then you have to code this List using a #List

    Code HTML4Strict:
    <ul id="List">
    <li><a href="" height="" width="" alt=""></a></li>
    <li><a href="" height="" width="" alt=""></a></li>
    <li><a href="" height="" width="" alt=""></a></li>
    <li><a href="" height="" width="" alt=""></a></li>
    <li><a href="" height="" width="" alt=""></a></li>
    </ul>

    Theres a start for you.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post


    I can code this list for a small fee :P

    Even then you have to code this List using a #menu

    <ul id="List">
    <li><a href="" height="" width="" alt=""</li>
    <li><a href="" height="" width="" alt=""</li>
    <li><a href="" height="" width="" alt=""</li>
    <li><a href="" height="" width="" alt=""</li>
    <li><a href="" height="" width="" alt=""</li>

    </ul>

    Theres a start for you.
    I know how to do that.

  12. #12
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres something similar that your trying to achieve.


    http://css.maxdesign.com.au/listamatic/horizontal26.htm

    Your going to have to slice up your list and apply margins.and padding.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would it be ok to use an image map for the navigation link backgrounds?

    I've found on numerous websites where the hover style background doesn't appear when you hover over the link, the normal background vanishes then a few seconds later the hover background appears

  14. #14
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't suggest using an ImageMap for this at ALL!This list can be created using HTML & CSS.
    I've found on numerous websites where the hover style background doesn't appear when you hover over the link, the normal background vanishes then a few seconds later the hover background appears
    That sounds like they were using Javascript or some type of serverside script.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    That sounds like they were using Javascript or some type of serverside script.
    I have that problem on my website. And even on test sites that are pure (x)html & css i have this problem.

  16. #16
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Image maps have the major problem that screen readers and search engines cannot see the links as they are not anchors. The sites you have seen where a delay occurs is due to loading separate images for the rollover - this delay can be eliminated using a composite image that has all button states in one, such as :

    All one has to do then is shift the background position.

    As mentioned before, the html can be no more than a list of text links :
    Code:
    <ul id="nav">
    	<li><a href="#">contact</a></li>
    	<li><a href="#">tutorials</a></li>
    	<li><a href="#">portfolio</a></li>
    	<li><a href="#">about</a></li>
    	<li class="current"><a href="#">home</a></li>
    </ul>
    The link order is reversed here so the <li>s can be floated right and a negative margin can provide the overlap and correct stacking order :
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    #nav {
    	width: 468px;
    	margin: 0 auto;
    	height: 26px;
    }
    #nav li {
    	list-style: none;
    	float: right;
    	margin-left: -7px;
    }
    #nav li a {
    	float: left;
    	width: 88px;
    	height: 26px;
    	line-height: 26px;
    	text-align: center;
    	text-decoration: none;
    	color: #000000;
    	background-image: url(images/buttons.gif);
    	font-family: "Times New Roman", Times, serif;
    	font-size: 15px;
    	font-weight: bold;
    }
    #nav li a:hover {
    	background-position: left center;
    }
    #nav li.current a, #nav li.current a:hover {
    	background-position: left bottom;
    	color: #FFFFFF;
    }
    Demo of this can be seen here.

  17. #17
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    n/m

  18. #18
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Centauri

    Good Job. I didnt feel like slicing up the design.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  19. #19
    SitePoint Evangelist
    Join Date
    Jun 2008
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ centauri.
    That is what I have created using an image map.

  20. #20
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by L4DD13 View Post
    @ centauri.
    That is what I have created using an image map.

    Yes, but Centauri's solution is much better.The only time I would use a Image map was if I had a actual map that i had to link and the positions were misorganized.Use Centauri's code.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  21. #21
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    The only time I would use a Image map was if I had a actual map that i had to link and the positions were misorganized
    Even that scenario does not need an image map, as can be seen in this current thread.

  22. #22
    SitePoint Zealot Acquiesce's Avatar
    Join Date
    Feb 2007
    Location
    Reading, England
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by neron-fx View Post
    Yep, Im with Centauri.

    Flash has its place, that place is not navigation A Flash based menu will never work as well as a pure XHTML and CSS one, particulary with regards to accessibility and SEO.
    Agreed - yes you can use Flash, but why would you want to when it can be done using HTML/CSS? Would be like using a pneumatic drill as a hole punch... a bit excessive!

    Flash usage to me should be saved for purpose built animation, not navigation

  23. #23
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well yes.I know maps can be done using list margins hovers etc.But if he knew you could do something like that with CSS & HTML.I dont think he wouldve asked us on how to create this simple list.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  24. #24
    SitePoint Member praveenaj's Avatar
    Join Date
    Dec 2008
    Location
    Kandy,Sri Lanka
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS image "hover"s for td cells instead of flash or image maps.. this method is SEO friendly..

  25. #25
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by praveenaj View Post
    Use CSS image "hover"s for td cells
    Firstly, IE6 cannot utilise :hover on anything other than link anchors, and secondly, there would only be <td> cells if there was a table, and there would only be a table if there was tabular data to display - which has nothing at all to do with a menu.....


Bookmarks

Posting Permissions

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