Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :
|
1 2 3 |
ul.mon-menu { .simple-inline-nav("|"; 6px); } |
Résultat : entrée 1 | entrée 2 | entrée 3
Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :
|
1 2 3 |
ul.mon-menu { .simple-inline-nav("|"; 6px; add-first); } |
Résultat : | entrée 1 | entrée 2 | entrée 3
Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :
|
1 2 3 |
ul.mon-menu { .simple-inline-nav("|"; 6px; add-last); } |
Résultat : entrée 1 | entrée 2 | entrée 3 |
Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :
|
1 2 3 |
ul.mon-menu { .simple-inline-nav("|"; 6px; add-both); } |
Résultat : | entrée 1 | entrée 2 | entrée 3 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/* Simple Inline Nav mixin Usage : 1. Getting a simple inline nav with a separator between each menu entries : .simple-inline-nav("|"; 6px); => entry 1 | entry 2 | entry 3 2. Getting a simple inline nav with a separator between each entries and a separator before the first entry : .simple-inline-nav("|"; 6px; add-first); => | entry 1 | entry 2 | entry 3 3. Getting a simple inline nav with a separator between each entries and a separator after the last entry : .simple-inline-nav("|"; 6px; add-last); => entry 1 | entry 2 | entry 3 | 4. Getting a simple inline nav with a separator between each entries and separators before and after the first and the last entries : .simple-inline-nav("|"; 6px; add-both); => | entry 1 | entry 2 | entry 3 | */ .simple-inline-nav(@separator; @padding) { > li { display: inline-block; padding-right: @padding; &:after { content: @separator; margin-left: @padding; } } > li:last-child { padding-right: 0; &:after { content: ""; } } } .simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-first) { .simple-inline-nav(@separator; @padding); > li:first-child { padding-left: @padding; &:before { content: @separator; margin-right: @padding; } } } .simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-last) { .simple-inline-nav(@separator; @padding); > li:last-child { padding-right: @padding; &:after { content: @separator; margin-left: @padding; } } } .simple-inline-nav(@separator; @padding; @additional-separator) when (@additional-separator = add-both) { .simple-inline-nav(@separator; @padding); > li:first-child { padding-left: @padding; &:before { content: @separator; margin-right: @padding; } } > li:last-child { padding-right: @padding; &:after { content: @separator; margin-left: @padding; } } } |