SitePoint Sponsor

User Tag List

Page 5 of 11 FirstFirst 123456789 ... LastLast
Results 101 to 125 of 268
  1. #101
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone, I was interested to see that this had been done and that it worked in all browsers without any hacks. My 'experimenting' time is limited because of paying jobs and publishing new demos on CSS play based on known methods.

    I did have a few spare hours on Sunday so thought that this might be a challenge.

    My version is only a basic fixed width dropdown and is in the early stages of development. It does still require a lot of refining to make it really usable.

    Stu

  2. #102
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yep, your version works great, nice job making it work stu, currently your the first one outside of me and paul to have it fully working.
    shows that you know your css.

    p.s. ul.sub :hover is not used by ie, so its not cross browser.
    the Only extra css for Opera that i used, was .sub:hover, it works across all browsers except ie5-6, but i still consider it extra code

    it does serve as a slight performance improvement in firefox

  3. #103
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    now that i think of it,
    it is used by ie (a part of it), but not in the same way as its used in other browsers.... xD

    ill count that as cross-browser anyway.

  4. #104
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can stick an 'a' in there and it still works in Opera
    ul.sub a:hover,
    ul.sub a:focus,
    ul.sub a:active {
    etc
    }

    I have updated my menu so that it allows tabbing in all browsers but Opera.

  5. #105
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    oh, your absolutely right, very very impressive.
    ill look into what caused the opera bug in my version then (this is how stuff evolves! ), i mean it worked, but the hover was slightly glitchy.

    a side question, are you taking part in the quiz? (if so then your currently the winner.)


    p.s. its very easy to make it tab-able, ain't it? xD

  6. #106
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tabbing comes automatically when adding the usual :active/:focus styling.

    I did have the Opera hover bug you mentioned but changing the method of holding the dropdown cured this.

    I will not take part in the quiz as this is a little unfair when several members are so close to an answer and I am new to this forum.
    I will not have time to be an active member but will check in from time to time, maybe for the next puzzle
    Even my forum works without me participating.

  7. #107
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you add tabindex="1" etc to the links then this will work in Opera.

  8. #108
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i have never heard of tabindex="1"
    thanks for telling me that


    well, now stu's version works in all browsers with the same code, and also supports tabbing in all browsers.

  9. #109
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Stu: these quizzes are right up your alley. It's ok to play the quizzes, everyone who "gets" them wins, though sometimes Paul gives 1st, 2nd etc place depending on when someone submits and how well it follows his rules. You can even get honourable mention.

    Despite this, nobody at all ever gets any delicious chocolate-chip cookies for winning. This is the biggest drawback of the quizzes. We need to get FedEx or someone to sponsor this. For the good of humanity and all that.

    *edit is this tabindex because Opera doesn't tab through hardly anything but forms? One reason I hate testing keyboards in Opera is because I keep forgetting the strange set of keystrokes special to Opera for "tabbing". But possibly the Opera keyboarding keystrokes will work with these menus?

    Mostly because tabindex can really lock a user down on a page : (

  10. #110
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another interesting side effect of this menu system is that you can click on the top level and the dropdown will stay open when you move the mouse off the menu.

  11. #111
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Caused by leftover :focus?

  12. #112
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Caused by leftover :focus?
    yep.

  13. #113
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I found the solution. I have sent Paul the effect. I now just need to make it a good, workable menu.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #114
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the :active/:focus state holds the dropdown in position.
    You can then hover any other top level and that level will also dropdown.

    BTW choc chip cookies would be nice, but not for me. I am coeliac with sever lactose intolerance, hypothyroid etc etc. So a nice steak or bottle of shiraz would be even better

  15. #115
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Maleika (Kohoutec) has also found the correct solution - well done Maleika.

    It shows what can be done with perseverance and not just giving up

  16. #116
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yes, the :active/:focus state holds the dropdown in position.
    You can then hover any other top level and that level will also dropdown.
    It might not happen with whatever setup is going on in this menu, but I ran into a nasty Gecko (and IE6!) bug when there was a combination of focus and hover... this is with a rather traditional suckerfish but tweaked to work for the keyboard.

    When a submenu had focus, you couldn't see anything to hover over it, and if you hovered over it, clicking on it destroyed the menu.
    The reason seemed to be that just Gecko engines where adding up both the margins from :hover AND :focus to get a number that was way too big.

    IE6 did this as well, but with :active and :hover.

    You can see the bug in action if you check out Blake Haswell's "Suckerfish part Deux" or some similar name in a Gecko browser and try clicking on some of the subs. The JS he has is very nice. But anyway because of the combined hover/focus issue I ended up writing some
    :hover:focus and
    :hover:active
    code to "undo" the over-adding.
    Kinda sucked but was only two extra declarations. No other browsers seemed to do it that way.

    So a nice steak or bottle of shiraz would be even better
    Again, a FedEx Sponsor of Paul's Quizzes could prolly send steaks too. Paul's in the UK too. : )

  17. #117
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Opera using Shift + Arrow keys will tab through the menu:
    Left/Right arrows to move through the top level links and Up/Down to move through the dropdown list.

  18. #118
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problems with this menu when :hover and :active or :focus are used together.

    In fact you can use the mouse to hover open a dropdown and still tab through the rest of the menu.

  19. #119
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    excellent job maleika, now your the first one thats taking part in the quiz, to give a fully usable (in ie6) semantic dropdown.

    now its a matter of tweaking it a little bit, and you have it working in all browsers and you can add tabbing too! xD

  20. #120
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    excellent job maleika, now your the first one thats taking part in the quiz, to give a fully usable (in ie6) semantic dropdown.

    now its a matter of tweaking it a little bit, and you have it working in all browsers and you can add tabbing too! xD
    Thanks, Timo.

    I have it working in all browsers now! I'm particularly proud that I got this to work without any extra HTML markup.

    I am sending Paul my revision. I will try the tabs as well, if we have another half an hour before it closes.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  21. #121
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i think you have about 4 hours and 15mins (maybe 3hours 15mins) depending on the timezone paul is in.
    but adding tabbing should not take more than 2mins.

  22. #122
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A really fun quiz! Well done Timo (YuriKolovsky) for an inspiring puzzle. Looking forward to seeing the different approaches, especially Timo's variable-width solution and multi-level solution!

    Since using :hover on <a href=""> is the only realistic approach, the problem boils down on how the submenu can be brought into view in two different ways: once when hovering over the main menu item and again when hovering over the submenu item, neither of which directly involving the submenu itelf! (In a multi-level menu it also needs to be brought into view when hovering over a descendent sub-submenu item too.) This is quite challenging, and many ideas which seem promising at first glance later appear not to be amenable to /two/ different ways. For example, I'm still tickled by the idea of toggling 'float' between 'none' and non-'none' on the A when hovering, so that the effect of 'clear' on the subsequent UL is toggled, but alas I couldn't immediately see a /second/ way of showing the UL when hovering over one of its child As. I wonder if anyone has had any success down this route.

    I had a short while to come up with two working versions of fixed-width single-level menus, involving no extra markup and in which all browsers read exactly the same selectors/properties apart from one/two extra rule(s) for non-IE browsers, and one theoretically-unnecessary but harmless additional one for Opera 9.6 and Opera 10, both based around more or less the same idea that Paul dropped into the conversation. I can't immediately see how either of these can be extended to solve the variable-width or multi-level problems however, although both do support persistent backgrounds on the parent menu item when hovering a child.

    As others mentioned, tabbing more or less came for free in one of my versions, but sadly the method has one tiny drawback in that in IE6 there's a narrow layout box stretching from the left of the menu to the left of the screen (an artifact of the way the submenus are being "hidden" offscreen) which would of course be made invisible via a transparent background but which prevents mouse interaction with anything underneath it (eg selection, context menus). This is a booby-trap to watch out for in any solution. I thought of using that technique after finding that tabbing didn't work nicely in CSS3-compliant browsers on my original technique, due to the interaction of overflow-x with overflow-y in modern browsers (which is different from IE6's non-standard behaviour with those properties). I was using these properties as my original way of hiding the submenus; I'm looking forward to seeing the other solutions for this sub-problem!

    One interesting thing I rediscovered when testing tabbing is that IE6 triggers :active when tabbing whilst other browsers trigger :focus. The behaviour of the other browsers seems correct, since focussing is indeed what you're doing.


    Quote Originally Posted by Paul O'B View Post
    Whaaat! I hear you say "that's impossible".
    Quote Originally Posted by ryanhellyer View Post
    The big question is ... how come no one has discovered this before? People have been trying to come up with a cross-browser way to do this for years and the best route that I've seen is to use IE conditional comments around table tags which produces some horrid looking HTML.
    Quote Originally Posted by YuriKolovsky View Post
    hahaha that is a excellent question, and i have no idea why! maybe lack of lateral thinking? or maybe css has not yet been explored enough? or maybe everyone said it was impossible and people simply never tried to make it work.
    Not sure about it being a lack of thinking or unexplored CSS. (The idea of targeting one element to influence the position of another is not particularly revolutionary, although it's always fun to look for new uses of all CSS techniques.) What's far more likely is that people read somewhere that it's impossible and believe it, which just goes to show that you shouldn't believe most of what you read about CSS unless the argument has been logically justified! There is a vast amount of incorrect information about CSS out there, based on misunderstandings of browser behaviour and of CSS itself. In fact, the only thing that was actually clear is that it's impossible to achieve the effect in IE6 using the "proper" solution, due to lack of sibling selectors and lack of :hover (and hence hover-bubbling) on most elements:
    a + ul {display:none}
    a:hover + ul, ul:hover {display:block}

    I think what rochow said is pretty realistic; investigating a new technique involves a *lot* of work, and the motivation for doing so is very low when there are already a couple of reasonable options, namely using JS (whilst ensuring the site is still navigable in IE6 without JS) or using the technique popularized by Stu Nicholls:
    Quote Originally Posted by Paul O'B View Post
    NOTE:I know there is a clever version out there by Stu Nichols that doesn't use any javascript
    but the motivation for those who enjoy working with CSS is much higher when they're told that an alternative solution is possible because they know they're not going to be wasting their time for nothing!

    Even when a new solution arises, it's not clear whether it's going to be usable. How maintainable is the HTML and CSS? Will you or someone else be able to understand it in six months' time? Is the CSS guaranteed to work in any compliant browser, or does the technique rely on unstandardized behaviour? (Offscreen-hiding is unstandardized for example.) Are there accessibility issues?

    Quote Originally Posted by Paul O'B View Post
    Stu's version relies on the fact that a table is nested inside an anchor which is invalid. To make it valid the nested code is hidden using conditional comments in the html but in essence the code is still invalid but just hidden from the validator. It also means that the html is more complicated because of all the extra table tags and conditional comments on every level.
    There's nothing invalid about it! They're just comments. The markup completely clean and semantically correct as far as any compliant consumer is concerned. The fact that IE6 can see inside the comments is just a quirk of that browser, and when addressing the fact that IE6 makes sense of these invisible TABLEs inside As we're just interested in the abilities of that particular browser, and web standards are entirely irrelevant at that point. This is precisely the strength of conditional comments, and people should feel free to use them in this way *provided that it's clear what purpose they serve and provided that the code remains intelligible*. It's all about achieving a balance between solving a problem and avoiding a maintenance nightmare down the road!


    @Timo: don't get too hung up on someone else taking credit for the idea; it's entirely unlikely that anyone here was the first to "invent" it in any case. There are hundreds of thousands of professional web developers out there and most of them don't publish their discoveries, yet they solve difficult problems in imaginative ways on a regular basis (admittedly often whilst not really understanding what the problem actually was or why their solution "works"!). Stu Nicholls popularised the idea of the A-wrapped TABLE, but I wouldn't bet a penny on him being the first to discover it (though I'm certainly not claiming he copied it from anywhere else). After all, the idea of wrapping the UL in the A is obvious, and when we find that it doesn't work in IE (because it doesn't know how to cope with the nested As of the submenu inside the outer As) it's only natural to look some other structure which offers greater "separation" between inside and outside, and TABLEs are always good candidates for this. So, instead of seeking "ownership", seek "guardianship" whereby one publishes the idea with a clear, simple demonstration and a proof of why the idea works -- and why other ideas fail. That's the most useful service one can offer to the webdev community these days!

    That's not to detract from the hard work you've done to develop this into a nice technique! It's a lot of fun to develop a technique from scratch, and I guess that's the reward :-) Thanks for presenting such an enjoyable quiz.

  23. #123
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Anton-technically it is valid, though the mere fact IE6 renders those comments makes it utterly invalid.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  24. #124
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    'Technically' is all that matters. Validity (of the document/css) is a meaningless concept when working in the closed world of one and only one browser. The only relevant thing is that browser's individual behaviour. Of course, it's important to /understand/ that browser's behaviour in order to ensure that what it does is expected and stable.

    Where document/css validity is important is in the rest of the code that all browsers consume. And then, it's not really important for the browsers we test in, because we can usually target them individually anyway (not that that's at all advisable from a maintainability point of view, beyond the necessary evils of IE<8). It's important for the browsers we *don't* test in.

  25. #125
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Anton P
    It's all about achieving a balance between solving a problem and avoiding a maintenance nightmare down the road!
    exactly why i made the menu, i like to add the minimal amount of html and simply forget about the css.

    it's entirely unlikely that anyone here was the first to "invent" it in any case.
    remember that it is equally likely as it is unlikely.
    There are hundreds of thousands of professional web developers out there and most of them don't publish their discoveries
    thus to the general public they have not invented it, the person who publishes his idea first is the inventor, not the person who thinks of it first.

    you can even steal an idea and publish it, and you will be the inventor.
    you can start a company and if a company working invents something for it, then the company owner is the inventor.

    it is highly possible that thousands of years before us a advanced civilization with airplanes and electricity and atomic bombs lived, yet we still consider a group of people in OUR millennium to be the inventors of such things.

    don't get too hung up on someone else taking credit for the idea
    i have the full right to get hung up on that! xD

    It's a lot of fun to develop a technique from scratch, and I guess that's the reward
    I will disagree, the reward is
    1. getting what i want (i needed a non js clean dropdown, so i made one)
    2. helping others (not all people consider this a reward, but i do)

    and i also have a third reward
    3. made a quiz and entertained a group of people

    'Technically' is all that matters.
    no, not always, what matters depends on the person making the website
    for me maintainability, browser support and result matter a lot.
    and i would never use excessive amounts of conditional comments in the html (one is enough, but only if you really need it) because it severely affects the maintainability of the html/css.

    i consider writing cross-browser code to be very important.

    i do not care if code is valid or not, but if i have a option between the two, then i choose valid.


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
  •