Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

pawkan kenluecha
pawkan kenluecha
26,303 Points
Posted by pawkan kenluecha
pawkan kenluecha
26,303 Points

Can this result be achieved by pure CSS ?

After I saw this video, I've just wondered that, Is it possible to do this with only CSS ? Yeah, I know that in this lesson we use Jquery to manipulate DOM and insert some HTML tags. How about we just predefine them and achieve this through media query instead inserting it there. We should be able to hide it and scale them differently with CSS. This may be better than depending on Jquery because we do not need to concern whether the browser allows Jquery running.

Joel Bardsley
Joel Bardsley
31,246 Points
Joel Bardsley
Joel Bardsley
31,246 Points

With CSS only, you can do something similar using just the unordered list and using media queries to modify its appearance based on device size. Here's a treehouse blog post that goes through the process

However you wouldn't be able to achieve the functionality Chalkers has provided with the select menu and button without JavaScript/jQuery.

1 Answer

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

yes, you can use :hover pseudo selector to achieve the same result. For instance, you could use:

/*give the anchor element of a menu's li a background-color on hover*/
li:hover > a{
    background-color: #000;
}
/*hide sub menus when parent element is not being hovered over*/

li > ul.sub-menu{
    display:none;
}

/* show a menu item's sub menu when you hover over the menu item*/
li:hover > ul.sub-menu{
    display:block;
    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}