SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 36
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)

    CSS -Test Your CSS Skills #39 - dropdown arrows

    CSS - Test Your CSS Skills Number 39 - dropdown arrows: Quiz now ended: Solution in post #32

    On my CSS "wishlist" is the "parent selector" that would give you the ability to style the parent of a child using the child as the reference. Or similarly the ability to style a parent element based on the child element that it contains. Alas there is no such thing in CSS - yet.

    That's all well and good but where is that leading us?

    In this quiz I will be asking you to perform the above feat in some respects in that I want you to automatically add indicator arrows to show that the item contains a dropdown menu. Essentially if a list element contains a dropdown menu then show an arrow.

    It may be easier to look at the attachment first so you can get an idea of what I am talking about.

    Are you back yet? Good lets begin.

    You can see that the arrow is only showing on elements that contain dropdowns which is a good visual aid and helps differentiate between elements that don't have dropowns attached.

    The puzzle is to add these arrow icons automatically so that if the menu items are changed and flyouts removed or added to different items then the indicator arrows would automatically reflect this change without the need to change any css or html.
    Also the arrow should change colour when items are hovered as shown in the attachment.

    You can use your own css but the html between the body tags must remain untouched.


    Here is the starting code:

    Code:
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Offices</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">testing</a>
                    <ul>
                        <li><a href="#">test 1</a></li>
                        <li><a href="#">test 2</a></li>
                        <li><a href="#">test 3</a></li>
                        <li><a href="#">testing</a>
                            <ul>
                                <li><a href="#">test 1</a></li>
                                <li><a href="#">test 2</a></li>
                                <li><a href="http://www.pmob.co.uk">PMOB</a></li>
                                <li><a href="#">test 4</a></li>
                                <li><a href="#">test 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">test 4</a></li>
                        <li><a href="#">test 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">Domain Names</a></li>
                <li><a href="#">Broadband</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">United Kingdom</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">Australia</a></li>
            </ul>
        </li>
    </ul>
    To save you re-inventing the wheel you can find basic css for dropdowns from the original suckerfish site, or from one of my old demos, or perhaps even from Jason's (Deathshadow) clever overflow version.


    Rules

    There are always rules

    Must work in IE8+ and modern Safari, Chrome, Firefox and Opera (don't bother with ie7 and under).

    Assume that only three levels of menus exist as per the attachment (any more than that is nonsense anyway most of the time).

    Remember that the menu order could change and the flyouts added or removed so you can't rely on sub menus being the third element along or down etc ( e.g. this won't work li + li + li{}). You must make your code cope automatically.

    Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).

    No scripts of any kind (unless you want to add support for IE7 and under because you found this quiz too easy).

    You can use whatever CSS rules you like but the html must be untouched and no extra elements added.


    I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won't necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).

    Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.

    Don't post your answers in this thread but PM with the details instead so that all can have a go.


    Have fun.


    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Oh looks interesting, good thing I got a free weekday tomorrow!

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Nice one!
    PM sent
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Wow that was quick I have a correct entry from Remon already (ScallioXTX). Well done Remon

    Anyone else close yet?

    I'm Sure Timo (YuriKolovsky) will have a correct solution soon also

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    What the...? that was quick! I have a free day on Wednesday so I definitely give it a try

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by molona View Post
    What the...? that was quick! I have a free day on Wednesday so I definitely give it a try
    Thanks Nuria

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Whee! I finally managed to crack one of these quizzes (I hope ). Solution PMed.

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I had an idea for a solution yesterday morning, but got stuck playing shogun2 (damn those addicting games), will post it today after work if it (hopefully) works.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I have correct solutions now from ralph.m and Dresden_phoenix. Well done to both and thanks for taking part.

    You lot are getting too clever now so I'll have to think up something more dastardly next time

    Anyone struggling? I'll give hints in a couple of days if you are.

    Unlike some of my other quizzes this one will produce a useful snippet of code that you can add to your own dropdown menus by default and automate the process of adding arrow indicators where needed.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    this one will produce a useful snippet of code that you can add to your own dropdown menus
    Yes, I was thinking I'd be able to use this in real world examples from now on. Nothing really lost if older browsers don't support it.

  11. #11
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    done
    the method I thought of initially worked just fine.

    p.s. don't bother with ie7 and under gives it away :P

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well done Timo I knew you would do it

    If you wanted an extra challenge you could add an "expression" for IE7 and under to mimic the CSS method.

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I really don't like expressions, I would rather make it work with bare javascript.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    I really don't like expressions, I would rather make it work with bare javascript.
    Normally i'd say yes but if you use a once only expression then it can be quite neat. See this thread for a good example.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    We have another correct solution form CletusSpuckler (Johan) so well done and thanks for
    taking part .

    Good to see that we have some proficient coders in the forum and thanks to all that took part. The quiz will stay open until the weekend and then I have a another little one to post for next week to keep the momentum going.

  16. #16
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Normally i'd say yes but if you use a once only expression then it can be quite neat. See this thread for a good example.
    what!? there are once-only expressions?

  17. #17
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    I got it.... but then I don't have it... I got it working but I need to work out how to let those arrows at the top always visible!

    I think that I'm going to read DS60's overflow method and see if I can work it out using some other technique.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by molona View Post
    I got it.... but then I don't have it....
    lol - you won.... and then you lost

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    what!? there are once-only expressions?
    See here for more info.

  20. #20
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    lol - you won.... and then you lost
    completely... but hey, it is another way to say that I obviously didn't follow the right approach.

  21. #21
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I'll admit that i am good with CSS but i have spent the last day and today trying to work this one out, i have only ever added arrows using classes and trying to work out how to do it with just CSS is killing me so to speak.

    I think i just finished trying method 3 and still fail to see how this is even possible

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    I'll admit that i am good with CSS but i have spent the last day and today trying to work this one out, i have only ever added arrows using classes and trying to work out how to do it with just CSS is killing me so to speak.

    I think i just finished trying method 3 and still fail to see how this is even possible
    Keep trying Chris and you will soon get what I am after

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    A couple of you are stumped so I'll start handing out some clues to point you in the right direction.


    The indicator arrow needs to be added somewhere but there are no actual "hooks" for it so where do find a place to hang the arrow (which doesn't have to be an image if you are good at border art - although the technique is the same)?

    The only thing that you know for certain is that when a parent list has a nested ul then the arrow should be shown.

    <li>
    <ul> ..
    </ul>
    </li>

    Therefore as I indicated at the start the parent selector would be a useful addition to the css repertoire as we could then target the parent of a nested ul and and add the arrow to it. As that property doesn't exist the only constant we have is the nested ul.

    Therefore you must find a way using the nested ul as your target and then place the arrow into position from there. That means the arrow will only show when there is a nested list which is exactly what we want.

    The next step would be to find a pseudo element that will allow you to add extra content. The final step would be working out how to position it in the right place from the ul and then changing it on hover.



    I've used a spoiler tag in case you didn't want to see the clues (just highlight the area with the mouse to read the spoiler text).

  24. #24
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Thanks for the hint Paul, i think i finally have it

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Thanks for the hint Paul, i think i finally have it
    Well done Chris that's it Hope you had fun tearing your hair out


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
  •