|
|
Line 11: |
Line 11: |
| | | |
| /********************************* MENU ********************************/ | | /********************************* MENU ********************************/ |
− | /* Wrapper for the menu */
| |
− | .menu_wrapper {
| |
− | width:50%;
| |
− | height:100vh;
| |
− | position:fixed;
| |
− | padding:0px;
| |
− | float:left;
| |
− | background-color:#f2f2f2;
| |
− | text-align:left;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
| | | |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | /* moving the margin for the submenu ul list */
| |
− | ul.submenu {
| |
− | width: 100%;
| |
− | margin: 10px 0px -11px 0px;
| |
− | list-style: none;
| |
− | }
| |
− |
| |
− | /*styling for the submenu buttons */
| |
− | .submenu li {
| |
− | width: 100%;
| |
− | margin-left: 10px;
| |
− | margin-bottom: 0px;
| |
− | }
| |
− |
| |
− |
| |
− | /* hover state for the submenu buttons */
| |
− | .submenu li a {
| |
− | width: 100%;
| |
− | padding: 5px 10px;
| |
− | display: inline-block;
| |
− | border-bottom: 1px solid #d3d3d3;
| |
− | background-color:white;
| |
− | text-decoration:none;
| |
− | color:#000000;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | .submenu li a:hover {
| |
− | background-color:#000000;
| |
− | color: #72c9b6;
| |
− | }
| |
− |
| |
− |
| |
− | /* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
| |
− | .collapsable_menu_control {
| |
− | width:100%;
| |
− | padding: 15px 0px;
| |
− | display:none;
| |
− | background-color:#000000;
| |
− | text-align:center;
| |
− | font-weight:bold;
| |
− | color:#72c9b6;
| |
− | cursor:pointer;
| |
− | -webkit-transition: all 0.4s ease;
| |
− | -moz-transition: all 0.4s ease;
| |
− | -ms-transition: all 0.4s ease;
| |
− | -o-transition: all 0.4s ease;
| |
− | transition: all 0.4s ease;
| |
− | }
| |
− |
| |
− | /* when hovering on that button */
| |
− | .collapsable_menu_control:hover {
| |
− | background-color: #72c9b6;
| |
− | color:#000000;
| |
− | }
| |
| | | |
| /********************************* CONTENT OF THE PAGE ********************************/ | | /********************************* CONTENT OF THE PAGE ********************************/ |