Reacties op het script Jquery tabbladen snippet

Thomas

Gepost op: 03 februari 2016 - 21:31

Moderator

Looks good, al zou ik de CSS nog wat tweaken misschien.

Iets waar ik mij altijd aan irriteer bij navigatie is dat de het actieve deel van een hyperlink altijd zo verdomd klein is

. Een truukje wat ik meestal gebruik is dat ik deze "uitvul" d.m.v. display: block, width: 100% en height: 100% (en nog wat opmaak zoals line-height en text-align om de tekst te centreren). Als je vervolgens de list items een vaste hoogte en breedte geeft krijgen de tabs ook een wat strakker uiterlijk.

Zodoende kom ik tot de volgende aangepaste variant:

css code - Bekijk de code zonder highlighting - Klap code in

                ul#tabs
{
    list-style: none;
    border-bottom: 3px solid #ff7100;
    width: 95%;
    padding: 5px 5px 0px 5px;
    overflow: hidden;
}

ul#tabs li
{
    display: inline-block;
    width: 80px;
    height: 25px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid transparent;
    margin: 0px 10px 0px 0px;
}

ul#tabs li a { display: block; width: 100%; height: 100%; line-height: 25px; text-align: center; text-decoration: none; }

/* volgorde van declaratie van de volgende twee stijlen is van invloed op hover effect */
ul#tabs li.active
{
    background-color: #fc8527;
    border: 1px solid #ff7100;
}

ul#tabs li:hover
{
    background-color: #ff7100;
    border: 1px solid #fc8527;
}
            
ul#tabs
{
    list-style: none;
    border-bottom: 3px solid #ff7100;
    width: 95%;
    padding: 5px 5px 0px 5px;
    overflow: hidden;
}
 
ul#tabs li
{
    display: inline-block;
    width: 80px;
    height: 25px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid transparent;
    margin: 0px 10px 0px 0px;
}
 
ul#tabs li a { display: block; width: 100%; height: 100%; line-height: 25px; text-align: center; text-decoration: none; }
 
/* volgorde van declaratie van de volgende twee stijlen is van invloed op hover effect */
ul#tabs li.active
{
    background-color: #fc8527;
    border: 1px solid #ff7100;
}
 
ul#tabs li:hover
{
    background-color: #ff7100;
    border: 1px solid #fc8527;
}
 

En 20 punten voor een snippet... hmm

Devimo

Gepost op: 03 februari 2016 - 21:39

Nieuw lid

Ja die 20 punten snapte ik zelf ook niet, denk post keer een script op SM en ineens staat er: +20 punten.

Bedankt voor je nieuwe variant, dit ding heb ik 2 jaar terug keertje gemaakt en dacht laat ik het eens posten haha. In mijn browser lijkt hij het inderdaad boven de tekst wel als link te zien, maar onder de tekst niet;)

Enkel aanvullende informatie, vragen en antwoorden op vragen zijn welkom.