Optimize mobile and desktop navbars
Anonymous Contributor
parent
e11309e3f3
commit
b259a3bec9
451
css/navbar.css
451
css/navbar.css
|
|
@ -26,46 +26,27 @@
|
||||||
transition: top 0.35s;
|
transition: top 0.35s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imMnMnCurrent .main-nav-label, .main-nav-label:hover, #imStickyBarObjects .main-nav-label:hover, .sub-nav-label:hover {
|
.nav-level > a:hover + ul {
|
||||||
background-color: rgb(204, 204, 204);
|
display: block
|
||||||
background-image: none;
|
|
||||||
border-color: rgb(211, 211, 211);
|
|
||||||
border-style: solid;
|
|
||||||
|
|
||||||
color: rgb(243, 243, 243);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.imMnMnCurrent .main-nav-label {
|
.nav-level .open-bottom {
|
||||||
color: rgb(255, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
#imStickyBarObjects .main-nav-label {
|
|
||||||
background: transparent;
|
|
||||||
font-weight: normal;
|
|
||||||
width: 141px;
|
|
||||||
height: 31px;
|
|
||||||
padding: 0px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#imStickyBarObjects .imMnMnCurrent .main-nav-label {
|
|
||||||
background-color: rgb(204, 204, 204);
|
|
||||||
background-image: none;
|
|
||||||
border-color: rgb(211, 211, 211);
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.imLevel .open-bottom {
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 1s;
|
visibility: hidden;
|
||||||
|
transition: visibility 0s, opacity 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imLevel .open-bottom li {
|
.nav-level .open-bottom li {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-level .open-bottom li > a:hover {
|
||||||
|
color: rgb(67, 67, 67);
|
||||||
|
}
|
||||||
|
|
||||||
.sub-nav-label {
|
.sub-nav-label {
|
||||||
width: 143px;
|
width: 143px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
|
|
@ -75,7 +56,415 @@
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imLevel:hover > .open-bottom {
|
.nav-level:hover > .open-bottom {
|
||||||
display: block;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-label-active .main-nav-label, .nav-level:hover > a, .main-nav-label:hover {
|
||||||
|
background-color: rgb(204, 204, 204) !important;
|
||||||
|
background-image: none;
|
||||||
|
border-color: rgb(211, 211, 211);
|
||||||
|
border-style: solid;
|
||||||
|
color: rgb(243, 243, 243);
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-top { position: relative; -ms-grid-row-align: start; align-self: start; -ms-grid-column-align: center; justify-self: center; max-width: 100%; box-sizing: border-box; z-index: 103; }
|
||||||
|
/**************************************************************************************************************************************************************/
|
||||||
|
@media (max-width: 1149.9px) and (min-width: 720px) {
|
||||||
|
#nav-top_wrapper { position: absolute; top: 154px; left: 650px; width: 70px; height: 38px; text-align: center; z-index: 1006; }
|
||||||
|
#nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; }
|
||||||
|
/* Main menu background */
|
||||||
|
#nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;}
|
||||||
|
#nav-top-container > ul:after {content: '';display: table;clear: both; }
|
||||||
|
/* Main menu button size and position */
|
||||||
|
#nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
#nav-top .hamburger-bar { margin: 3px auto; width: 65%; height: 3px; background-color: rgba(243, 243, 243, 1); }
|
||||||
|
/* Main menu separator button style */
|
||||||
|
#nav-top .nav-level { cursor: default; }
|
||||||
|
#nav-top-menu-opened .nav-level { cursor: default; }
|
||||||
|
#nav-top .hidden { display: none; }
|
||||||
|
#nav-top-menu-opened { overflow: visible; z-index: 10402; position:fixed; top: 0; bottom: 0; left: 0; width: 150px; border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
|
||||||
|
#nav-top-menu-opened ul ul { display: none; /*margin-bottom: 1px;*/ }
|
||||||
|
#nav-top-menu-opened li > div { display: none; }
|
||||||
|
#nav-top-menu-opened #nav-top-container-menu-opened div > ul { display: block; }
|
||||||
|
#nav-top-menu-opened #nav-top-container-menu-opened > ul { position: absolute; left: 0; right: auto; top: 40px; background-color: rgba(67, 67, 67, 1); overflow-x: hidden; overflow-y: auto; height: calc(100% - 40px); width: 100%; }
|
||||||
|
#nav-top-menu-opened .hamburger-menu-close-button { display: block; font-family: 'Arial', sans-serif; font-size: 30px; text-align: right; padding: 5px 10px; color: rgba(255, 255, 255, 1); }
|
||||||
|
#nav-top-menu-opened .hamburger-menu-close-button span { cursor: pointer; }
|
||||||
|
#imPageExtContainer:after{ position: fixed; top: 0; right: 0; width: 0; height: 0; content: ''; opacity: 0; transition: opacity 1000ms; z-index: 10401;}
|
||||||
|
.menu-nav-top-opened #imPageExtContainer:after{ width: 100%; height: 100%; background-color: transparent; opacity: 0.65;}
|
||||||
|
.menu-nav-top-towards-closing #imPageExtContainer:after { width: 100%; height: 100%; background-color: transparent; opacity: 0.65; transition: background-color 1000ms linear, opacity;}
|
||||||
|
/* Responsive menu button size and position */
|
||||||
|
#nav-top-menu-opened li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
#nav-top-menu-opened li:last-child {margin-bottom: 0;}
|
||||||
|
#nav-top-menu-opened .hamburger-menu-background { position: absolute;display: block;top: 0;bottom: 0;width: 150px;left: 0; right: auto;background-color: rgba(67, 67, 67, 1);transition: left 500ms, right 500ms, opacity 500ms;-webkit-transition: left 500ms, right 500ms, opacity 500ms;}
|
||||||
|
/* Responsive menu separation line style */
|
||||||
|
#nav-top-menu-opened.animated { animation-name: finalZindex; animation-duration: 1000ms; animation-fill-mode: forwards;}
|
||||||
|
@keyframes finalZindex { 0% { z-index: 0; width: 0; } 99% { z-index: 0; width: 0; } 100% { z-index: 1001; width: 150px; }}#imPageExtContainer { z-index: 1; position: relative; transition: transform 1000ms; -webkit-transition: transform 1000ms;}
|
||||||
|
.menu-nav-top-opened #imPageExtContainer { transform: translate3d(150px, 0, 0);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 719.9px) and (min-width: 480.0px) {
|
||||||
|
#nav-top_wrapper { position: absolute; top: 170px; left: 427px; width: 55px; height: 38px; text-align: center; z-index: 1006; }
|
||||||
|
#nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; }
|
||||||
|
/* Main menu background */
|
||||||
|
#nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;}
|
||||||
|
#nav-top-container > ul:after {content: '';display: table;clear: both; }
|
||||||
|
/* Main menu button size and position */
|
||||||
|
#nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
/* Main menu separator button style */
|
||||||
|
#nav-top .nav-level { cursor: default; }
|
||||||
|
#nav-top-menu-opened .nav-level { cursor: default; }
|
||||||
|
#nav-top .hidden { display: none; }
|
||||||
|
#nav-top-menu-opened { overflow: visible; z-index: 10402; }
|
||||||
|
#nav-top-menu-opened ul ul { display: none; /*margin-bottom: 1px;*/ }
|
||||||
|
#nav-top-menu-opened li > div { display: none; }
|
||||||
|
#nav-top-menu-opened #nav-top-container-menu-opened div > ul { display: block; }
|
||||||
|
#nav-top-menu-opened #nav-top-container-menu-opened > ul { position: absolute; left: 0; right: auto; top: 40px; background-color: rgba(67, 67, 67, 1); overflow-x: hidden; overflow-y: auto; height: calc(100% - 40px); width: 100%; }
|
||||||
|
#nav-top-menu-opened .hamburger-menu-close-button { display: block; font-family: 'Arial', sans-serif; font-size: 30px; text-align: right; padding: 5px 10px; color: rgba(255, 255, 255, 1); }
|
||||||
|
#nav-top-menu-opened .hamburger-menu-close-button span { cursor: pointer; }
|
||||||
|
#nav-top-menu-opened { position:fixed; top: 0; bottom: 0; left: 0; width: 150px; border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;; }
|
||||||
|
.menu-nav-top-opened #imPageExtContainer:after{ width: 100%; height: 100%; background-color: transparent; opacity: 0.65;}
|
||||||
|
.menu-nav-top-towards-closing #imPageExtContainer:after { width: 100%; height: 100%; background-color: transparent; opacity: 0.65; transition: background-color 1000ms linear, opacity;}
|
||||||
|
#nav-top .hidden { display: none; }
|
||||||
|
/* Responsive menu button size and position */
|
||||||
|
#nav-top-menu-opened li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
#nav-top-menu-opened li:last-child {margin-bottom: 0;}
|
||||||
|
#nav-top-menu-opened .hamburger-menu-background { position: absolute;display: block;top: 0;bottom: 0;width: 150px;left: 0; right: auto;background-color: rgba(67, 67, 67, 1);transition: left 500ms, right 500ms, opacity 500ms;-webkit-transition: left 500ms, right 500ms, opacity 500ms;}
|
||||||
|
/* Responsive menu separation line style */
|
||||||
|
#nav-top-menu-opened { z-index: 0; width: 0;}
|
||||||
|
#nav-top-menu-opened.animated { animation-name: finalZindex; animation-duration: 1000ms; animation-fill-mode: forwards;}
|
||||||
|
@keyframes finalZindex { 0% { z-index: 0; width: 0; } 99% { z-index: 0; width: 0; } 100% { z-index: 1001; width: 150px; }}#imPageExtContainer { z-index: 1; position: relative; transition: transform 1000ms; -webkit-transition: transform 1000ms;}
|
||||||
|
.menu-nav-top-opened #imPageExtContainer { transform: translate3d(150px, 0, 0);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 479.9px) {
|
||||||
|
#nav-top_wrapper { position: absolute; top: 168px; left: 282px; width: 42px; height: 38px; text-align: center; z-index: 1004; }
|
||||||
|
#nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; }
|
||||||
|
/* Main menu background */
|
||||||
|
#nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;}
|
||||||
|
#nav-top-container > ul:after {content: '';display: table;clear: both; }
|
||||||
|
/* Main menu button size and position */
|
||||||
|
#nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
/* Main menu separator button style */
|
||||||
|
#nav-top .nav-level { cursor: default; }
|
||||||
|
#nav-top-menu-opened .nav-level { cursor: default; }
|
||||||
|
#nav-top .hidden { display: none; }
|
||||||
|
#nav-top-menu-opened { overflow: visible; z-index: 10402; }
|
||||||
|
#nav-top-menu-opened ul ul { display: none; /*margin-bottom: 1px;*/ }
|
||||||
|
#nav-top-menu-opened li > div { display: none; }
|
||||||
|
#nav-top-menu-opened #nav-top-container-menu-opened div > ul { display: block; }
|
||||||
|
#nav-top-menu-opened #nav-top-container-menu-opened > ul { position: absolute; left: 0; right: auto; top: 40px; background-color: rgba(67, 67, 67, 1); overflow-x: hidden; overflow-y: auto; height: calc(100% - 40px); width: 100%; }
|
||||||
|
#nav-top-menu-opened .hamburger-menu-close-button { display: block; font-family: 'Arial', sans-serif; font-size: 30px; text-align: right; padding: 5px 10px; color: rgba(255, 255, 255, 1); }
|
||||||
|
#nav-top-menu-opened .hamburger-menu-close-button span { cursor: pointer; }
|
||||||
|
#nav-top-menu-opened { position:fixed; top: 0; bottom: 0; left: 0; width: 150px; border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; z-index: 0; width: 0; }
|
||||||
|
.menu-nav-top-opened #imPageExtContainer:after{ width: 100%; height: 100%; background-color: transparent; opacity: 0.65;}
|
||||||
|
.menu-nav-top-towards-closing #imPageExtContainer:after { width: 100%; height: 100%; background-color: transparent; opacity: 0.65; transition: background-color 1000ms linear, opacity;}
|
||||||
|
#nav-top .hidden { display: none; }
|
||||||
|
/* Responsive menu button size and position */
|
||||||
|
#nav-top-menu-opened li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
#nav-top-menu-opened li:last-child {margin-bottom: 0;}
|
||||||
|
#nav-top-menu-opened .hamburger-menu-background { position: absolute;display: block;top: 0;bottom: 0;width: 150px;left: 0; right: auto;background-color: rgba(67, 67, 67, 1);transition: left 500ms, right 500ms, opacity 500ms;-webkit-transition: left 500ms, right 500ms, opacity 500ms;}
|
||||||
|
/* Responsive menu separation line style */
|
||||||
|
#nav-top-menu-opened.animated { animation-name: finalZindex; animation-duration: 1000ms; animation-fill-mode: forwards;}
|
||||||
|
@keyframes finalZindex { 0% { z-index: 0; width: 0; } 99% { z-index: 0; width: 0; } 100% { z-index: 1001; width: 150px; }}#imPageExtContainer { z-index: 1; position: relative; transition: transform 1000ms; -webkit-transition: transform 1000ms;}
|
||||||
|
.menu-nav-top-opened #imPageExtContainer { transform: translate3d(150px, 0, 0);}
|
||||||
|
}
|
||||||
|
/**************************************************************************************************************************************************************/
|
||||||
|
|
||||||
|
@media (max-width: 1149px) {
|
||||||
|
.hamburger-button {
|
||||||
|
background-color: rgb(67, 67, 67);
|
||||||
|
background-image: none;
|
||||||
|
border-color: rgb(211, 211, 211);
|
||||||
|
border-style: solid;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0px;
|
||||||
|
border-width: 0px;
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-button .hamburger-bar {
|
||||||
|
margin: 3px auto;
|
||||||
|
width: 65%;
|
||||||
|
height: 3px;
|
||||||
|
background-color: rgb(243, 243, 243);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-button > div {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-menu-close-button {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: right;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
padding: 5px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imPageExtContainer.darken::after {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
opacity: 0.5;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imStickyBar_imObjectImage_02_wrapper {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container .hamburger-button {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-button > div > div {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imStickyBarContainer {
|
||||||
|
height: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imStickyBarContainer > div {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky_wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-top_wrapper .menu-mobile-animated {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 160px;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0px;
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 0px;
|
||||||
|
overflow: visible;
|
||||||
|
z-index: 10402;
|
||||||
|
right: auto;
|
||||||
|
background-color: rgb(211, 211, 211);
|
||||||
|
visibility: visible;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.5s;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul li {
|
||||||
|
background-color: rgb(67, 67, 67);
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container .sub-nav-label {
|
||||||
|
background-color: rgb(87, 87, 87);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul li .main-nav-label, #nav-sticky-container .sub-nav-label {
|
||||||
|
width: 160px;
|
||||||
|
display: table-cell;
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul.hidden {
|
||||||
|
left: -160px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imStickyBarObjects .main-nav-label {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-level > .open-bottom {
|
||||||
|
opacity: reset;
|
||||||
|
display: none;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-level:hover > .open-bottom {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hamburger button style */
|
||||||
|
#nav-top .hamburger-button {cursor: pointer; width: 27px; height: 27px; display: inline-block; vertical-align: top; padding: 0; border-width: 0px 0px 0px 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;
|
||||||
|
background-color: rgba(67, 67, 67, 1);background-image: none;border-color: rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1);border-style: solid;}
|
||||||
|
#nav-top .hamburger-button > div { display: table; width: 100%; height: 100%; position: relative; z-index: 1; }
|
||||||
|
#nav-top .hamburger-button > div > div { display: table-cell; vertical-align: middle; }
|
||||||
|
#nav-sticky .hamburger-button {cursor: pointer; width: 31px; height: 31px; display: inline-block; vertical-align: top; padding: 0; border-width: 0px 0px 0px 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;
|
||||||
|
background-color: transparent;background-image: none;border-color: rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1);border-style: solid; }
|
||||||
|
#nav-sticky .hamburger-bar { margin: 3px auto; width: 65%; height: 3px; background-color: rgba(243, 243, 243, 1); }
|
||||||
|
#nav-sticky .hamburger-button > div { display: table; width: 100%; height: 100%; position: relative; z-index: 1; }
|
||||||
|
#nav-sticky .hamburger-button > div > div { display: table-cell; vertical-align: middle; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1150px) {
|
||||||
|
.hamburger-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-top_wrapper { position: absolute; top: 155px; left: 200px; width: 947px; height: 38px; text-align: center; z-index: 1003; }
|
||||||
|
#nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
|
||||||
|
/* Main menu background */
|
||||||
|
#nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;}
|
||||||
|
#nav-top-container > ul:after {content: '';display: table;clear: both; }
|
||||||
|
/* Main menu button size and position */
|
||||||
|
#nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
#nav-top .hamburger-bar { margin: 3px auto; width: 65%; height: 3px; background-color: rgba(243, 243, 243, 1); }
|
||||||
|
/* Main menu separator button style */
|
||||||
|
#nav-top .nav-level { cursor: default; }
|
||||||
|
#nav-top-menu-opened .nav-level { cursor: default; }
|
||||||
|
#nav-top { text-align: right;}
|
||||||
|
/* Level menu background */
|
||||||
|
#nav-top ul ul { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: transparent; }
|
||||||
|
/* Level menu button size and position */
|
||||||
|
#nav-top ul ul li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
/* Multiple column menu buttons position */
|
||||||
|
#nav-top .multiple-column > ul {max-width: 140px;}
|
||||||
|
#nav-top ul ul li:last-child {margin-bottom: 0;}
|
||||||
|
/* Level menu current button style */
|
||||||
|
#nav-top ul ul { z-index: 2; }/* Level menu show/hide directives */
|
||||||
|
#nav-top .multiple-column {position: absolute; z-index: 2;left: 0; display: none; }
|
||||||
|
#nav-top .multiple-column > ul {position: static;
|
||||||
|
display: inline-block;vertical-align: top;}
|
||||||
|
#nav-top .multiple-column > ul > li {display: block;}
|
||||||
|
#nav-top-container > ul > li > ul {position: absolute;
|
||||||
|
top: 27px;
|
||||||
|
}
|
||||||
|
#nav-top-container > ul > li > ul.open-bottom { left: 0; }
|
||||||
|
#nav-top-container > ul > li > ul.open-left { right: 140px; }
|
||||||
|
#nav-top-container > ul > li > ul.open-right { left: 140px; }
|
||||||
|
#nav-top-container > ul > li > ul ul, #nav-top-container .multiple-column > ul > li ul {position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#nav-top-container > ul > li > ul ul.open-left, #nav-top-container .multiple-column > ul > li ul.open-left{ right: 140px; }
|
||||||
|
#nav-top-container > ul > li > ul ul.open-right, #nav-top-container .multiple-column > ul > li ul.open-right{ left: 140px; }
|
||||||
|
#nav-top-container > ul > li:nth-child(6n+1) {
|
||||||
|
margin-left: 0;
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
#nav-top-container > ul > li:nth-child(n+7) {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
#nav-top-menu-opened { display: none; }
|
||||||
|
#nav-top .hamburger-component { display: none; }
|
||||||
|
|
||||||
|
/* Level menu current button style */
|
||||||
|
#nav-sticky { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; }
|
||||||
|
/* Main menu background */
|
||||||
|
#nav-sticky-container > ul:after {content: '';display: table;clear: both; }
|
||||||
|
/* Main menu separator button style */
|
||||||
|
#nav-sticky .nav-level { cursor: default; }
|
||||||
|
#nav-sticky-menu-opened .nav-level { cursor: default; }
|
||||||
|
/* Level menu background */
|
||||||
|
#nav-sticky ul ul { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: transparent; z-index: 2; }
|
||||||
|
/* Level menu button size and position */
|
||||||
|
#nav-sticky ul ul li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; }
|
||||||
|
/* Multiple column menu buttons position */
|
||||||
|
#nav-sticky .multiple-column > ul {max-width: 145px; position: static; display: inline-block;vertical-align: top;}
|
||||||
|
#nav-sticky ul ul li:last-child {margin-bottom: 0;}
|
||||||
|
/* Level menu current button style */
|
||||||
|
#nav-sticky .multiple-column {position: absolute; z-index: 2;left: 0;}
|
||||||
|
#nav-sticky .multiple-column > ul > li {display: block;}
|
||||||
|
#nav-sticky-container > ul > li > ul {position: absolute;
|
||||||
|
top: 31px;
|
||||||
|
}
|
||||||
|
#nav-sticky-container > ul > li > ul.open-bottom { left: 0; }
|
||||||
|
#nav-sticky-container > ul > li > ul.open-left { right: 145px; }
|
||||||
|
#nav-sticky-container > ul > li > ul.open-right { left: 145px; }
|
||||||
|
#nav-sticky-container > ul > li > ul ul, #nav-sticky-container .multiple-column > ul > li ul {position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#nav-sticky-container > ul > li > ul ul.open-left, #nav-sticky-container .multiple-column > ul > li ul.open-left{ right: 145px; }
|
||||||
|
#nav-sticky-container > ul > li > ul ul.open-right, #nav-sticky-container .multiple-column > ul > li ul.open-right{ left: 145px; }
|
||||||
|
#nav-sticky .hamburger-component { display: none; }
|
||||||
|
#imStickyBar_imObjectImage_02_wrapper { position: absolute; top: 2px; left: 20px; width: 110px; height: 70px; text-align: center; z-index: 1003; overflow: hidden; }
|
||||||
|
#imStickyBar_imObjectImage_02_wrapper img {-webkit-clip-path: inset(0 0 -9.375% 0);clip-path: inset(0 0 -9.375% 0);}
|
||||||
|
#imStickyBar_imCell_2 { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; -ms-grid-rows: 100%; grid-template-rows: 100%; }
|
||||||
|
#imStickyBar_imObjectImage_02 { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
|
||||||
|
#imStickyBar_imCellStyleBorders_2 {
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
border-left: 0; border-right: 0; }
|
||||||
|
|
||||||
|
#imStickyBarObjects .main-nav-label {
|
||||||
|
background: transparent;
|
||||||
|
font-weight: normal;
|
||||||
|
width: 141px;
|
||||||
|
height: 31px;
|
||||||
|
padding: 0px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky_wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
left: 140px;
|
||||||
|
width: 992px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1002;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container {
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0px;
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 0px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0px;
|
||||||
|
display: inline-table;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul > li {
|
||||||
|
position: relative;
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul > li:nth-child(6n+1) {
|
||||||
|
margin-left: 0px;
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-sticky-container > ul > li:nth-child(n+7) {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-label-active .main-nav-label {
|
||||||
|
color: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{% macro menu(menuid,pages) %}
|
{% macro menu(menuid,pages) %}
|
||||||
<!-- UNSEARCHABLE -->
|
<!-- UNSEARCHABLE -->
|
||||||
<div id="{{ menuid }}">
|
<div id="{{ menuid }}">
|
||||||
<div id="{{ menuid }}_container">
|
<div id="{{ menuid }}-container">
|
||||||
<div class="hamburger-button hamburger-component">
|
<div class="hamburger-button hamburger-component">
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -11,19 +11,19 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<ul class="menu-mobile-animated hidden">
|
||||||
<div class="hamburger-menu-background-container hamburger-component">
|
<div class="hamburger-menu-background-container hamburger-component">
|
||||||
<div class="hamburger-menu-background menu-mobile menu-mobile-animated hidden">
|
<div class="hamburger-menu-background menu-mobile menu-mobile-animated hidden">
|
||||||
<div class="hamburger-menu-close-button"><span>×</span></div>
|
<div class="hamburger-menu-close-button"><span>×</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="menu-mobile-animated hidden">
|
{%- for page in pages.children.visible %}{% set active_page = (page.active or page.activeChild) ? ' nav-label-active' : '' %}<li class="{% if page.children.visible.count > 0 %}nav-level{% else %}imPage{% endif %}{{ active_page }}">
|
||||||
{%- for page in pages.children.visible %}{% set active_page = (page.active or page.activeChild) ? 'imMnMnCurrent' : '' %}<li class="{% if page.isFirst() %} imMnMnFirst {% elseif page.isLast() %} imMnMnLast {% else %} imMnMnMiddle {% endif %} {% if page.children.visible.count > 0 %} imLevel {% else %} imPage {% endif %} {{ active_page }}">
|
|
||||||
<a class="main-nav-label" href="{% if page.routable %}{{ page.url(true)|e }}{% else %}#{% endif %}" {% if page.header.external_url %}target="_blank"{% endif %}>{{ page.menu }}</a>
|
<a class="main-nav-label" href="{% if page.routable %}{{ page.url(true)|e }}{% else %}#{% endif %}" {% if page.header.external_url %}target="_blank"{% endif %}>{{ page.menu }}</a>
|
||||||
{%- if page.children.visible.count > 0 %}
|
{%- if page.children.visible.count > 0 %}
|
||||||
<ul data-original-position="open-bottom" class="open-bottom">
|
<ul data-original-position="open-bottom" class="open-bottom">
|
||||||
{%- for cpage in page.children.visible %}
|
{%- for cpage in page.children.visible %}
|
||||||
{% set active_cpage = (cpage.active or cpage.activeChild) ? 'imMnMnCurrent' : '' %}
|
{% set active_cpage = (cpage.active or cpage.activeChild) ? ' nav-label-active' : '' %}
|
||||||
<li class="{% if cpage.isFirst() %}imMnMnFirst{% elseif cpage.isLast() %}imMnMnLast{% else %}imMnMnMiddle{% endif %} imLevel {{ active_cpage }}">
|
<li class="nav-level{{ active_cpage }}">
|
||||||
<a class="sub-nav-label" href="{{ cpage.url(true)|e }}" {% if cpage.header.external_url %}target="_blank"{% endif %}>{{ cpage.menu }}</a>
|
<a class="sub-nav-label" href="{{ cpage.url(true)|e }}" {% if cpage.header.external_url %}target="_blank"{% endif %}>{{ cpage.menu }}</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor -%}
|
{% endfor -%}
|
||||||
|
|
@ -36,65 +36,31 @@
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
<header id="imHeader">
|
<header id="imHeader">
|
||||||
<h1 class="imHidden">4Creative</h1>
|
|
||||||
<div id="imHeaderObjects">
|
<div id="imHeaderObjects">
|
||||||
<div id="imHeader_imObjectImage_02_wrapper" class="template-object-wrapper">
|
<div id="imHeader_imObjectImage_02_wrapper" class="template-object-wrapper">
|
||||||
<div id="imHeader_imObjectImage_02">
|
<img loading="lazy" alt="4Creative Logo" style="position: relative; left: 0px; top: 0px; user-select: none;" draggable="false" unselectable="on" src="/{{ theme.header.logo|first.path|e }}">
|
||||||
<div id="imHeader_imObjectImage_02_container">
|
|
||||||
<img loading="lazy" alt="4Creative Logo" style="width: 180px; height: 180px; position: relative; left: 0px; top: 0px; user-select: none;" width="180" height="180" unselectable="on" src="{{ media['image://4Creative-logo.png'].url|e }}">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="nav-top_wrapper" class="template-object-wrapper">
|
||||||
</div>
|
{{ _self.menu('nav-top',pages) }}
|
||||||
<div id="imHeader_imMenuObject_04_wrapper" class="template-object-wrapper">
|
|
||||||
{{ _self.menu('imHeader_imMenuObject_04',pages) }}
|
|
||||||
<script>
|
|
||||||
var imHeader_imMenuObject_04_settings = {
|
|
||||||
'menuId': 'imHeader_imMenuObject_04',
|
|
||||||
'responsiveMenuEffect': 'reveal',
|
|
||||||
'responsiveMenuLevelOpenEvent': 'mouseover',
|
|
||||||
'animationDuration': 1000,
|
|
||||||
}
|
|
||||||
x5engine.boot.push(function () { x5engine.initMenu(imHeader_imMenuObject_04_settings) });
|
|
||||||
$(function () { $('#imHeader_imMenuObject_04_container ul li').not('.imMnMnSeparator').each(function () { var $this = $(this), timeout = 0; $this.on('mouseenter', function () { if ($(this).parents('#imHeader_imMenuObject_04_container-menu-opened').length > 0) return; clearTimeout(timeout); setTimeout(function () { $this.children('ul, .multiple-column').stop(false, false).fadeIn(); }, 250); }).on('mouseleave', function () { if ($(this).parents('#imHeader_imMenuObject_04_container-menu-opened').length > 0) return; timeout = setTimeout(function () { $this.children('ul, .multiple-column').stop(false, false).fadeOut(); }, 250); }); }); });
|
|
||||||
</script>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="imHeader_imObjectTitle_05_wrapper" class="template-object-wrapper">
|
<div id="imHeader_imObjectTitle_05_wrapper" class="template-object-wrapper">
|
||||||
<div id="imHeader_imObjectTitle_05"><span id="imHeader_imObjectTitle_05_text">Weltenverbund im Opensim</span></div>
|
<div id="imHeader_imObjectTitle_05"><span id="imHeader_imObjectTitle_05_text">Weltenverbund im Opensim</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="imHeader_imObjectTitle_06_wrapper" class="template-object-wrapper">
|
|
||||||
<div id="imHeader_imObjectTitle_06"><span id="imHeader_imObjectTitle_06_text">Weltenverbund im Opensim</span></div>
|
|
||||||
</div>
|
|
||||||
<div id="imHeader_imObjectTitle_07_wrapper" class="template-object-wrapper">
|
|
||||||
<div id="imHeader_imObjectTitle_07"><span id="imHeader_imObjectTitle_07_text">Weltenverbund im Opensim</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div id="imStickyBarContainer">
|
<div id="imStickyBarContainer">
|
||||||
<div id="imStickyBarGraphics"></div>
|
<div id="imStickyBarGraphics"></div>
|
||||||
<div id="imStickyBar">
|
<div id="imStickyBar">
|
||||||
<div id="imStickyBarObjects">
|
<div id="imStickyBarObjects">
|
||||||
<div id="imStickyBar_imMenuObject_01_wrapper" class="template-object-wrapper">
|
|
||||||
{{ _self.menu('imStickyBar_imMenuObject_01',pages) }}
|
|
||||||
<script>
|
|
||||||
var imStickyBar_imMenuObject_01_settings = {
|
|
||||||
'menuId': 'imStickyBar_imMenuObject_01',
|
|
||||||
'responsiveMenuEffect': 'slide',
|
|
||||||
'responsiveMenuLevelOpenEvent': 'mouseover',
|
|
||||||
'animationDuration': 1000,
|
|
||||||
}
|
|
||||||
x5engine.boot.push(function () { x5engine.initMenu(imStickyBar_imMenuObject_01_settings) });
|
|
||||||
$(function () { $('#imStickyBar_imMenuObject_01_container ul li').not('.imMnMnSeparator').each(function () { var $this = $(this), timeout = 0; $this.on('mouseenter', function () { if ($(this).parents('#imStickyBar_imMenuObject_01_container-menu-opened').length > 0) return; clearTimeout(timeout); setTimeout(function () { $this.children('ul, .multiple-column').stop(false, false).fadeIn(); }, 250); }).on('mouseleave', function () { if ($(this).parents('#imStickyBar_imMenuObject_01_container-menu-opened').length > 0) return; timeout = setTimeout(function () { $this.children('ul, .multiple-column').stop(false, false).fadeOut(); }, 250); }); }); });
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
<div id="imStickyBar_imObjectImage_02_wrapper" class="template-object-wrapper">
|
<div id="imStickyBar_imObjectImage_02_wrapper" class="template-object-wrapper">
|
||||||
<div id="imStickyBar_imObjectImage_02">
|
<div id="imStickyBar_imObjectImage_02">
|
||||||
<img loading="lazy" alt="4Creative Logo transparent" style="width: 110px; height: 64px; position: relative; left: 0px; top: 0px; user-select: none;" width="110" height="64" unselectable="on" src="{{ media['image://4Creative-logo-transp.png'].url|e }}">
|
<img loading="lazy" alt="4Creative Logo transparent" style="width: 110px; height: 64px; position: relative; left: 0px; top: 0px; user-select: none;" draggable="false" width="110" height="64" unselectable="on" src="/{{ theme.header.stickylogo|first.path|e }}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="nav-sticky_wrapper" class="template-object-wrapper">
|
||||||
|
{{ _self.menu('nav-sticky',pages) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="imHidden" href="#imGoToCont" title="Überspringen Sie das Hauptmenü">Direkt zum Seiteninhalt</a>
|
<a class="imHidden" href="#imGoToCont" title="Überspringen Sie das Hauptmenü">Direkt zum Seiteninhalt</a>
|
||||||
<div id="imSideBar">
|
|
||||||
<div id="imSideBarObjects"></div>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in New Issue