Today we developed the Horizontal Dropdown Menu a little more, expanding the mobile-first layout into two more view sizes, which allowed us to explore float, position, and more box-model concepts. We also learned about CSS transitions with the transition property, and I showed you some magic incantations to serve files locally via the JavaScript task runner gulp.
[ ] This should seem eerily similar to the Horizontal Dropdown Menu in bits and pieces, because it is, but it's also enough different to drive you nuts. Use all your skills and the tools provided to produce a pixel perfect implementation.
[ ] Okay, not gonna lie, you haven't tackled anything like this. Yet. But you have all the tools: CSS transitions, floats and positioning, lots of HTML, some JavaScript click event handlers. You can do it. If you work together.
Review
Today we developed the Horizontal Dropdown Menu a little more, expanding the mobile-first layout into two more view sizes, which allowed us to explore
float
,position
, and more box-model concepts. We also learned about CSS transitions with thetransition
property, and I showed you some magic incantations to serve files locally via the JavaScript task runnergulp
.Resources
gulp-connect
yargs
<picture>
element<picture>
elementHorizontal Slide Out Menu
Responsive Product Grid Layout