body { color: #333; } .pure-img-responsive { max-width: 100%; height: auto; } /* Add transition to containers so they can push in and out. */ #layout, #menu, .menu-link { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /* This is the parent `<div>` that contains the menu and the content area. */ #layout { position: relative; left: 0; padding-left: 0; } #layout.active #menu { left: 150px; width: 150px; } #layout.active .menu-link { left: 150px; } /* The content `<div>` is where all your content goes. */ .content { margin: 0 auto; padding: 0 2em; max-width: 800px; margin-bottom: 50px; line-height: 1.6em; } h1 a { color: inherit; text-decoration: none; } .header { margin: 0; color: #333; text-align: center; padding: 2.5em 2em 0; border-bottom: 1px solid #eee; } .header h1 { margin: 0.2em 0; font-size: 3em; font-weight: 500; } .header h2 { font-weight: 500; color: #333; padding: 0; margin-top: 0; } .content h2 { margin: 50px 0 20px 0; font-weight: 600; color: #333; } /* The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that appears on the left side of the page. */ #menu { margin-left: -150px; /* "#menu" width */ width: 150px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; /* so the menu or its navicon stays above all content */ background: #191818; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* All anchors inside the menu should be styled like this. */ #menu a { color: #999; border: none; padding: 0.6em 0 0.6em 0.6em; } /* Remove all background/borders, since we are applying them to #menu. */ #menu .pure-menu, #menu .pure-menu ul { border: none; background: transparent; } /* Add that light border to separate items into groups. */ #menu .pure-menu ul, #menu .pure-menu .menu-item-divided { border-top: 1px solid #333; } /* Change color of the anchor links on hover/focus. */ #menu .pure-menu li a:hover, #menu .pure-menu li a:focus { background: #333; } /* This styles the selected menu item `<li>`. */ #menu .pure-menu-selected, #menu .pure-menu-heading { background: #1f8dd6; } /* This styles a link within a selected menu item `<li>`. */ #menu .pure-menu-selected a { color: #fff; } /* This styles the menu heading. */ #menu .pure-menu-heading { font-size: 110%; color: #fff; margin: 0; } /* -- Dynamic Button For Responsive Menu -------------------------------------*/ /* The button to open/close the Menu is custom-made and not part of Pure. Here's how it works: */ /* `.menu-link` represents the responsive menu toggle that shows/hides on small screens. */ .menu-link { position: fixed; display: block; /* show this only on small screens */ top: 0; left: 0; /* "#menu width" */ background: #000; background: rgba(0,0,0,0.7); font-size: 10px; /* change this value to increase/decrease button size */ z-index: 10; width: 2em; height: auto; padding: 2.1em 1.6em; } .menu-link:hover, .menu-link:focus { background: #000; } .menu-link span { position: relative; display: block; } .menu-link span, .menu-link span:before, .menu-link span:after { background-color: #fff; width: 100%; height: 0.2em; } .menu-link span:before, .menu-link span:after { position: absolute; margin-top: -0.6em; content: " "; } .menu-link span:after { margin-top: 0.6em; } .floating-image { float: right; margin-right: 20px; margin-top: 20px; } /* -- Responsive Styles (Media Queries) ------------------------------------- */ /* Hides the menu at `48em`, but modify this based on your app's needs. */ @media (min-width: 48em) { .header, .content { padding-left: 2em; padding-right: 2em; } #layout { padding-left: 150px; /* left col width "#menu" */ left: 0; } #menu { left: 150px; } .menu-link { position: fixed; left: 150px; display: none; } #layout.active .menu-link { left: 150px; } } @media (max-width: 48em) { /* Only apply this when the window is small. Otherwise, the following case results in extra padding on the left: * Make the window small. * Tap the menu to trigger the active state. * Make the window large again. */ #layout.active { position: relative; left: 150px; } .floating-image img { width: 48px; height: 48px; } } pre { font-weight: bold; } td { padding: 3px; }
Travelled to 7 computer(s): bhatertpkbcr, gwrvuhgaqvyk, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt
No comments. add comment
Snippet ID: | #1020396 |
Snippet name: | side-menu.css |
Eternal ID of this version: | #1020396/6 |
Text MD5: | 69ddbbca7ec0044705e8ab08bb1ff09d |
Author: | stefan |
Category: | css |
Type: | Document |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2018-12-19 21:54:09 |
Source code size: | 5558 bytes / 272 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 301 / 4445 |
Version history: | 5 change(s) |
Referenced in: | [show references] |