SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2005
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE and JS are like Fast good

    It's hard trying to live with no Javasscript so I raplace a dropdown menu with a list items in CSS.

    Great!

    Except that it's not working with IE now.

    So now it is hard to live without considering IE.

    IE and Javasript are like fastfood you don't want to eat it but you cannot ignore it.

    Can you feel my discouragment, and my bad english.

    Sorry I have to go catch a BigMac.
    If you have some fruits for desert for me i'll get it want I return

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Got some code or a URL you want help with?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    If you are talking about drop down menus then you need to use a little javascript for ie6 and under.

    Have look at the suckerfish menus for some lightweight unobtrusive code:

    http://www.htmldog.com/articles/suckerfish/

    http://www.pmob.co.uk/temp/drop-down-multi-opaque.htm

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2005
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2005
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul the multi-opaque is impressive

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can add the basic drop down into your code quite easily.

    Code:
    ul#navlist li:hover ul#subnavlist,
    ul#navlist li.over ul#subnavlist
    {
     display: block;
     position: absolute;
     font-size: 8pt;
     padding-top: 0px;
     border: 3px #ffffff solid;
     left:0;
    }
    * html ul#navlist li.over ul#subnavlist{margin-top:1.5em;}
    ul#navlist li:hover ul#subnavlist li a,
    ul#navlist li.over ul#subnavlist li a
    {
     display: block;
     width: 350px;
     border: none;
     padding: 2px;
     border: 0px #ffffff solid;
     color: #2c5b85; 
     text-decoration: none; 
     background-color: #9c3;
    }
    You may need to tweak the positions a bit for ie but the above is more or less the same.

    Then just add the js:

    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("navlist").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" over";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" over\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>

  7. #7
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    should we really be using css for behaviours?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blain
    should we really be using css for behaviours?
    Hello

    The (JavaScript) Hover was so successful that they build it in the browsers

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    should we really be using css for behaviours?
    Its a fair point but if the functionality is already built in then why not use it if it uses less code than a javascript alternative.

    PPK had an interesting article about this a couple of years ago.

    http://www.digital-web.com/articles/..._presentation/




  10. #10
    SitePoint Zealot
    Join Date
    Feb 2005
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can someone with PC IE eyes can confirm if my dropdown suckerfish menu is working.
    Thank you.

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Italy
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu

    yes patlap it is working though there is a white space at the top. see attachment
    Attached Images Attached Images

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to remove the padding to dtop the gap pointed out by poisson and it will allow the submenu to be selected because at present it will vanish before you can get to it (in IE.)

    Code:
    ul#navlist li.over ul#subnavlist
    {
     display: block;
     position: absolute;
     font-size: 8pt;
     /*padding-top: 4px; remove this*/
     border: 1px #2c5b85 solid;
     left:15px;
    }

  13. #13
    SitePoint Zealot
    Join Date
    Feb 2005
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everythings have is place.
    Thank you Paul.


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
  •