SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to replace link <a> trigger with <span>

    Hi all

    Working on a project and seems my seo side of things is getting effected with the below:

    <ul id="nav">
    <li><a href="#" class="">Section</a>
    <ul>
    <li><a href="1">link1</a></li>
    <li><a href="2">link2</a></li>
    <li><a href="3">link3</a></li>
    </ul>
    </li>
    </ul>

    Basically the # dead link, how can I add the same effect with CSS without applying the link?

    Something like:

    <li><span class="">Section</span>
    ......

    Making sense?

    Thanks
    The more you learn.... the more you learn there is more to learn.

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I would swap out the anchor for a span. I assume this is for showing active and inactive links correct?

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    If it is for navigation dropdowns, you should link to a page which lists the submenu items (for accessibility reasons more than anything else). If you don't want a lot of sub-pages you could always link to your sitemap (to a fragment section which lists the links).

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it is for navigation dropdowns,...
    Yes dropdowns Alex, linking to the sitemap could be the solution domain.com/sitemap.html#section something like this?

    you should link to a page which lists the submenu items...
    I really should but a lot of the pages have been indexed, and it would mean breaking my site structure and losing ranking for a while.

    unless just kept my original link:

    domain.com/link1.html instead of changing the link to domain.com/section/link1.html

    Plus there isn't much content for a whole page, some dropdowns only have 2 links.

    Thanks for the advice guys
    The more you learn.... the more you learn there is more to learn.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Basically the # dead link, how can I add the same effect with CSS without applying the link?
    You can't do that with CSS (presentation control) or HTML (semantics and structure). You need to use JavaScript (interactive behaviour). But relying on client-side scripting presents an accessibility problem, so using a real link would be better. You can then apply some non-critical JavaScript that displays the drop-down and prevents the default link action. This method is known as 'progressive enhancement', improving usability for those who can benefit from it, without destroying accessibility for those who cannot.
    Birnam wood is come to Dunsinane

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Yes dropdowns Alex, linking to the sitemap could be the solution domain.com/sitemap.html#section something like this?
    Definately that would work, it means the links have a physical location attached and they have relevence as they link to a fragment section of the page (or in this case sitemap), that way the accessibility issue of dead links is avoided because you are linking to a page which has a "non-dropdown" reliant method of showing the child links in each of the menus


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
  •