Drop-menyer för navigering

Enkel

Enkel dropnavigering. Klistra in denna CSS och aktivera sen i designmallen hur många nivåer den skall visa.
Visa kod

/**
 * Stil för undernivåer
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) li ul li a {
    width: 170px;
}

/**
 * Hover-stil för undernivåer
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) li ul li a:hover {
    background-color: #fff;
    color: #000;
}

/**
 * Specifikt nivå 2
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > ul > li > a {
   
}

/**
 * Specifikt nivå 2 hover
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > ul > li > a:hover {

}

/**
 * Specifikt nivå 3
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > ul > li > ul > li > a {
   
}

/**
 * Specifikt nivå 3 hover
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > ul > li > ul > li > a:hover {
   
}

/**
 * Drop funktionalitet
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button)
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) li
{
    position:relative;
    float:left;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) li a
{
    display: block;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) ul
{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0px;
    z-index: 10;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) ul li
{
    float: none;
    display: block;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) li:hover > ul
{
    display: block;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) ul li ul
{
    top: 0;
    left:100%;
    min-height: 500px;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) li ul li a
{
    line-height:120%;
    margin: 0px;
}

Fullbredd

Fullbredds-dropnavigering. Klistra in denna CSS och aktivera sen i designmallen hur många nivåer den skall visa.
Visa kod

/**
 * 1. Ändra margin-top för att justera vart
 * drop-menyn hamnar.
 * 2. Ändra bakgrundsfärg för fullbreddsplatta.
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > .navi-sub-wrapper {
    margin-top: 62px;
    background-color: transparent;
}

/**
 * 1. Ändra bredden för navigeringsdropp (hemsidan bredd
 * oftast)
 * 2. Ändra bakgrundsfärg för center-platta
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > .navi-sub-wrapper > .center {
    max-width: 1200px;
    background-color: #eee;
}

/**
 * 1. Sätt bredden till samma som center-platta
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul {
    width: 1200px;
    padding: 20px !important;
}

/**
 * Ändra bredden för att styra hur många kolumner med
 * länkar som visas i droppen.
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul > li {
    width: 20% !important;
    padding-bottom: 30px;
}

/**
 * Utseende för länkar i drop (nivå 2)
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul li a {
    padding: 0px;
    color: #555;
    font-size: 14px;
}

/**
 * Utseende för pil/punkt framför länknamn
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul > li > a:before {
    content: '» ';
    color: #222222;
    font-size: 14px;
}

/**
 * Utseende för länkar i drop vid mouseover
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul li a:hover,
ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul li a.active {
    background-color: transparent;
    color: #000;
}

/**
 * Utseende för länkar i drop (nivå 3)
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul li ul li a {
    padding: 0px;
    color: #555;
    font-size: 14px;
    padding-left: 14px;
}

/**
 * Utseende för pil/punkt framför länknamn
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul > li > ul > li > a:before {
    content: '';
    color: #aaa;
    font-size: 12px;
}

/**
 * Drop funktionalitet (ändra ej)
 */

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > .navi-sub-wrapper {
    display: none;
    position: absolute;
    left: 0;
    width: 100% !important;
    z-index: 9000;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > .navi-sub-wrapper > .center {
    overflow: auto;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul > li,
ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul > li {
    display: block !important;
    float: left !important;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul li,
ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul li a {
    float: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li > .navi-sub-wrapper > .center {
    margin-left: auto;
    margin-right: auto;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li:hover .navi-sub-wrapper {
    display: block;
}

ul.sitesmart-navi:not(.sitesmart-navi-menu-button) > li .navi-sub-wrapper > .center > ul li ul {
    padding: 0px !important;
}
 

Fullbredd

Fullbredds-dropnavigering. Klistra in denna CSS och aktivera sen i designmallen hur många nivåer den skall visa.
Visa kod

<ul class="sitesmart-navi top">

    {navigation-loop-1}
    <li {navigation-li-class-active-1}>

        <a {navigation-li-class-active-1} href="{navigationUrl-1}">{navigationName-1}</a>

        {if-navigation-2}
        <div class="navi-sub-wrapper">
     
            <div class="center">

                <ul class="sitesmart-navi sub">

                    {navigation-loop-2}
                    <li>
                        <a {navigation-li-class-active-2} href="{navigationUrl-2}">{navigationName-2}</a>

                        {if-navigation-3}
                        <ul>

                            {navigation-loop-3}
                            <li>
                                <a {navigation-li-class-active-3} href="{navigationUrl-3}">{navigationName-3}</a>
                            </li>
                            {navigation-endLoop-3}

                        </ul>
                        {endIf-navigation-3}

                    </li>
                    {navigation-endLoop-2}

                </ul>

            </div>

        </div>
        {endIf-navigation-2}

    </li>
    {navigation-endLoop-1}

</ul>
 
DesignSmart - en del av SiteSmart

Denna sida och produktion av designmallar är ett samarbete mellan MediaVault International AB, SiteSmart Sales Sweden AB och våra designpartners. SiteSmart erbjuder webbsidor med CMS/Publiceringsverktyg, E-handelsverktyg och andra moduler samt relaterade produkter och tjänster för hemsidor. MediaVault International utvecklar de verktyg som marknadsföres av SiteSmart.

Kontakta oss nu

Bispmotalagatan 1 | 591 35 Motala
Telefon: 0141-20 25 40
E-post » info@sitesmart.se

Öppettider

Vår support har öppet helgfria vardagar 
08.00 - 17.00. Ring 0141-20 25 40 eller hitta information och filmer på » www.sitesmartsupport.se

Samtliga produkter under varumärket SiteSmart ® utvecklas av MediaVault International AB.

» Våra villkor

Copyright © 2015 SiteSmart, all rights reserved   |   » Sitemap   |   » Cookies