NOrtmann1
95 lines
2.3 KiB
CSS
95 lines
2.3 KiB
CSS
/*
|
|
CSS für den Block Navbar mit seinen Elementen nach BEM
|
|
*/
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #333d43;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.nav__left,
|
|
.nav__right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav__logo img {
|
|
height: 3rem;
|
|
}
|
|
|
|
.nav__center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav__item {
|
|
position: relative;
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.nav__dropdown-toggle {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav__dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: #f9f9f9;
|
|
min-width: 12rem;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,.15);
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.nav__link,
|
|
.nav__dropdown-menu a {
|
|
padding: 0.5rem 1rem; /* Abstand um den Text */
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav__dropdown:hover .nav__dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
/* CSS von https://responsivenavigation.net/examples/simple-toggle/ */
|
|
/*
|
|
.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
|
|
ul.simple-toggle { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
|
|
ul.simple-toggle li { display: inline-block; text-align: left; }
|
|
ul.simple-toggle li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
|
|
ul.simple-toggle li a:hover { background-color: #ccc; }
|
|
|
|
.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
|
|
#mobile-nav { display:none; }
|
|
|
|
@media (max-width:48.000em){
|
|
|
|
ul.simple-toggle { display: none; }
|
|
.anchor-link, #mobile-nav { display: block; }
|
|
|
|
ul.open {
|
|
background-color: #F4F4F4;
|
|
box-shadow: 2px 2px 3px #444444;
|
|
display: block;
|
|
list-style: none outside none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 100%;
|
|
width: 70%;
|
|
z-index: 500;
|
|
}
|
|
ul.open li { display: block; list-style: none; text-align: center; }
|
|
ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
|
|
ul.open li a:hover { background-color: #ccc; color: #fff; }
|
|
|
|
}
|
|
*/ |