Now we are ready to start styling the mobile version of this project. To accomplish this, we're going to transform the menu from a horizontal shape to a vertical one. Instead of having a second-level menu, we will instead create some cards and make them slide in when the corresponding first-level menu item is clicked.
So, first of all, let's write the necessary CSS to change the shape of our menu (within application_mobile.css
):
nav { width: 290px; height: 100%; font-size: 1em; text-align: center; border-radius: 0; box-shadow: 0 0 5px rgba(0,0,0,0.4); position: relative; overflow: hidden; } nav > ul{ width: 290px; padding: 0; position: absolute; top: 0; left: 0; z-index: 1; } nav > ul > li{ width: 100%; display: block; position: static; border-bottom: 1px solid #313131; box-shadow: 0 1px 1px rgba(255,255,255,0.1) inset, 0 -1px 1px rgba(255,255,255,0.1) inset, 0 -1.5em 0 rgba(0,0,0,0.1) inset; } nav...