Menu Variations

Menu VariationsJSN Blank has flexible menu items with logical groups of parameters which allows user to create sub menu and dropdown menu on responsive layout. The template also provides 3 menu styles to help menu items to be displayed nicely for better UX, they are Main menu, Side menu, and Tree menu. Mega MenuSide MenuTree Menu ._O689JW7n { position: relative; } ._KzlwM38p { position: relative; } ._ngb5Wk8q { font-size: 1em; vertical-align: middle; text-align: center; width: auto; height: auto; } ._ngb5Wk8q--diamond, ._ngb5Wk8q--circle, ._ngb5Wk8q--square { width: 50px; height: 50px; line-height: 50px; border: 1px solid; } ._ngb5Wk8q--circle { border-radius: 100%; } ._ngb5Wk8q--diamond { transform: rotate(45deg); -webkit-transform: rotate(45deg); } ._ngb5Wk8q--diamond:before { display: block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } ._VWvqNvR9 { vertical-align: middle; } ._qaQP6rvk > a { color: inherit !important; } ._qaQP6rvk { word-break: break-word; } ._qaQP6rvk__icon--left i { margin-right: 0.3em; } ._qaQP6rvk__icon--right i { margin-left: 0.3em; } ._qaQP6rvk__icon--top i { margin-bottom: 0.5em; } ._qaQP6rvk__icon--top > span, ._qaQP6rvk__icon--top > a, ._qaQP6rvk__icon--top > span[data-empty][contenteditable] { display: block; } ._qaQP6rvk [class*="--diamond"] { margin-right: 1em; } ._7XqAY8_A > span:last-child { line-height: inherit; } ._7XqAY8_A[class*="dropcap--"] > span:first-child { display: block; margin-right: 10px; float: left; font-size: 2em; background: #919da9; color: black; width: 50px; height: 50px; line-height: 50px; } ._7XqAY8_A[class*="dropcap--"]:not(.dropcap--none) > span:first-child { margin-right: 20px; text-align: center; } ._7XqAY8_A.dropcap--none > span:first-child { text-align: inherit; line-height: 1 !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0; } ._7XqAY8_A.dropcap--circle > span:first-child { border-radius: 100%; } ._7XqAY8_A:not([class*="dropcap--"]) > span { margin-right: 0 !important; } ._7XqAY8_A ol, ._7XqAY8_A ul { list-style-position: inside; } ._7XqAY8_A blockquote { font-size: inherit; } ._pDNE0kYl { position: relative; } ._pDNE0kYl { margin: 0 -15px; } ._epNwrNGv { position: relative; overflow: hidden; display: inline-flex; justify-content: flex-start; align-items: flex-start; vertical-align: middle; } ._epNwrNGv picture { width: 100%; } ._epNwrNGv img { display: inline-block; object-fit: cover; max-width: 100%; max-height: 100%; height: auto; text-align: center; width: 100%; vertical-align: middle; } ._epNwrNGv.image--rounded { border-radius: 10px; } ._epNwrNGv.image--circle { border-radius: 100%; } ._epNwrNGv[data-action], ._epNwrNGv[data-event] { cursor: pointer; } ._NYd6gvae { position: relative; } ._DblQBlAM { position: relative; } ._DblQBlAM { clear: both; } ._DblQBlAM[data-parallax="true"] { position: relative; } ._DblQBlAM__parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } ._DblQBlAM[data-parallax="true"] .parallax-bg { position: absolute; left: 50%; bottom: 0; max-width: 100%; min-width: 100%; min-height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); object-fit: cover; will-change: transform; } ._DblQBlAM { box-sizing: border-box; padding: 15px 0; position: relative; } ._DblQBlAM__container { width: auto; margin: auto; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } @media all { #__pf_apx4r ._G176hwon[data-id="_G176hwon"] { font-size: 18px; margin: 0px 0px 8px; } #__pf_apx4r ._0MrYhDMr[data-id="_0MrYhDMr"] { margin: 7px 0px; } #__pf_apx4r ._vdLJuMK7[data-id="_vdLJuMK7"] { margin: 0px; } #__pf_apx4r ._MOQzhrmD[data-id="_MOQzhrmD"] { font-size: 14px; margin: 0px; } #__pf_apx4r ._1V03TGmn[data-id="_1V03TGmn"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } #__pf_apx4r ._BmdJTPDJ[data-id="_BmdJTPDJ"] { text-align: center; border-radius: 5px; background-image: linear-gradient(rgb(247, 247, 247), rgb(255, 255, 255)); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border: 1px solid rgb(241, 241, 241); } #__pf_apx4r ._2oplh81k[data-id="_2oplh81k"] { font-size: 14px; margin: 0px; } #__pf_apx4r ._vzkMTlz8[data-id="_vzkMTlz8"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } #__pf_apx4r ._ayKaT4zG[data-id="_ayKaT4zG"] { text-align: center; border-radius: 5px; background-image: linear-gradient(rgb(247, 247, 247), rgb(255, 255, 255)); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border: 1px solid rgb(241, 241, 241); } #__pf_apx4r ._qxEMhrON[data-id="_qxEMhrON"] { font-size: 14px; margin: 0px; } #__pf_apx4r ._5m4ZTdzq[data-id="_5m4ZTdzq"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } #__pf_apx4r ._bzoaTrD2[data-id="_bzoaTrD2"] { text-align: center; border-radius: 5px; background-image: linear-gradient(rgb(247, 247, 247), rgb(255, 255, 255)); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border: 1px solid rgb(241, 241, 241); } #__pf_apx4r ._BgjQu6g3[data-id="_BgjQu6g3"] { margin: 0px -7.5px; } #__pf_apx4r ._rXozCJY2[data-id="_rXozCJY2"] { padding: 0px 0px 15px; } } @media only screen and (max-width: 767px) { } @media only screen and (min-width: 768px) and (max-width: 991px) { } @media only screen and (min-width: 992px) and (max-width: 1199px) { } @media only screen and (min-width: 1200px) { }

Warnung

Menu Variations

Menu Variations

Mega Menu

Side Menu

Tree Menu

Das Neueste von

Schreibe einen Kommentar

Club-Veranstaltungen