login  Naam:   Wachtwoord: 
Registreer je!
Scripts > JavaScript > jQuery Snippets > Jquery tabbladen snippet


Reacties op het script Jquery tabbladen snippet

Offline  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:
  1. ul#tabs
  2. {
  3. list-style: none;
  4. border-bottom: 3px solid #ff7100;
  5. width: 95%;
  6. padding: 5px 5px 0px 5px;
  7. overflow: hidden;
  8. }
  9.  
  10. ul#tabs li
  11. {
  12. display: inline-block;
  13. width: 80px;
  14. height: 25px;
  15. border-top-left-radius: 5px;
  16. border-top-right-radius: 5px;
  17. border: 1px solid transparent;
  18. margin: 0px 10px 0px 0px;
  19. }
  20.  
  21. ul#tabs li a { display: block; width: 100%; height: 100%; line-height: 25px; text-align: center; text-decoration: none; }
  22.  
  23. /* volgorde van declaratie van de volgende twee stijlen is van invloed op hover effect */
  24. ul#tabs li.active
  25. {
  26. background-color: #fc8527;
  27. border: 1px solid #ff7100;
  28. }
  29.  
  30. ul#tabs li:hover
  31. {
  32. background-color: #ff7100;
  33. border: 1px solid #fc8527;
  34. }

En 20 punten voor een snippet... hmm .

Offline  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.
 
© 2002-2019 Sitemasters.be - Regels - Laadtijd: 0.028s