Özgür Yazılım Derneği web sitesi https://oyd.org.tr
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
oyd-web/static/css/hamburger.css

186 lines
3.6 KiB

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
/*
===================================================
Base styles for all devices sizes, but mobile first
===================================================
*/
/*
Hamburger menu icon/'button' styling
*/
.menu-toggle {
display: block;
float: right;
vertical-align: middle;
/* padding: .75em 15px; */
line-height: 1.8em;
font-size: 1.8em;
color: #ffffff;
}
.menu-toggle:hover,
.menu-toggle:focus {
color: #484557;
}
/*
Offscreen menu styling
- Default styles + mobile first
*/
.main-menu {
position: absolute;
display: none;
left: -200px; /* push off the screen to the left for future animation */
top: 0;
height: 100%;
background-color: #4C2447;
z-index: 999;
}
.main-menu ul {
list-style: none;
margin: 0;
padding: 1.2em 0.8em 0;
/* Hide shadow w/ -8px while 'closed' */
min-height: 100%;
width: 200px;
background: #4C2447;
/* text-align: center; */
}
/*
Generic style for ALL hamburger menu links
*/
/*
Close button positioning
- Other styles come from `.main-menu a`
*/
.main-menu .menu-close {
position: absolute;
right: 10px;
top: 0;
line-height: 1.5em;
font-size: 1.5em;
}
/*
=======================================
On small devices, allow it to toggle...
=======================================
*/
/*
Opening hamburger menu!
- Using `:target` for non-JavaScript
- `[aria-expanded]` will be used if/when JavaScript is added to improve interaction, though it's completely optional.
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
display: block;
left: 0; /* slide from -200px to the left edge at 0 */
top: -12px;
overflow-x: visible;
overflow-y: hidden;
outline: none;
/* fix box-shadow so it shows now */
}
/*
Close menu button
- Make sure it's on top!
- Basically, when `.main-menu` is the target of the click, get its child `.menu-close` link
*/
.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
z-index: 1001;
font-size: 1.7em;
color: white;
}
/*
Hamburger menu list
- Make sure it's on top!
- Basically, when `.main-menu` is the target of the click, get its child `<ul>`
*/
.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
position: relative;
z-index: 1000;
font-size: 1.5em;
text-align: center;
}
/*
Backdrop
- Show backdrop
- Basically, when `.main-menu` is the target of the click, get its sibling `.backdrop`
- Note: we could use `.main-menu:target:after`, but
it wouldn't be clickable.
*/
/*
======================================================
If CSS supports `fixed`, like all good modern browsers
======================================================
*/
@supports (position: fixed) {
/*
Allow backdrop to stay fixed and not "scroll"
*/
.main-menu,
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
position: fixed;
}
}
/*
================================
Larger screen styling
================================
*/
/*
Horizontal menu (i.e. no hamburger)
*/
@media (min-width: 600px) {
/* Hide hamburger menu/'button' */
.menu-toggle,
.main-menu .menu-close {
display: none;
}
/* Undo positioning of off-canvas menu */
.main-menu {
position: relative;
left: auto;
top: auto;
height: auto;
display: block;
}
.main-menu ul {
display: flex; /* allows for full height of menu */
/* Undo off-canvas styling */
padding: 0;
height: auto;
width: auto;
background: none;
}
}