Sans semantic.js

1. Onglets

Monsieur Bio

est trés bô , voyez ses photos

"ui bottom attached active tab segment" Monsieur Bio visible. L'"ui bottom attached tab segment" est non visible.

[fr] Onglets non fonctionnels sans semantic.js et script ad hoc[en] Nonfunctional tabs without semantic.js and ad hoc .js

=> sans semantic.js :

Monsieur Bio

est trés bô

sans son bob

ou le javascript de spip "ajouter document depuis …" :

2. Accordion

[fr] Accordion non fonctionnels sans semantic.js et script ad hoc[en] Non functional Accordion without semantic.js and ad hoc .js

=> sans semantic.js : inclure script src="#CHEMIN{prive/javascript/presentation.js}" ,
et donc, (si class="depliant replie") accordion «subtil», comme dans l'espace privé : «on attend 400ms avant de deplier, periode durant laquelle, si la souris sort du controle, on annule le depliement, le repliement ne fonctionne qu'au clic» (on annule donc se comportement avec class="depliant replie")

Massifs
Orange 3-,3,3+

Ou Accordion JQuery SPIP , ou accordion avec semantic.js ↣

3. Menu

[fr] Seul les menus déroulant "simple dropdown" sont fonctionnels sans .js [en] Only Drop down menus "simple dropdown" was functional without .js

=> sans semantic.js , menus "simple dropdown", class="ui simple dropdown menu :

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

ui X menu avec X ∈ { text, icon, compact, stackable, fluid, pagination, vertical, tabular, inverted, colored, top attached, bottom attached, top fixed, bottom fixed, left fixed vertical, right fixed vertical, secondary - pointing, vertical fluid tabular, vertical fluid right tabular, three fluid item, remove element padding, borderless ...}

top fixed ⇒ la page passe sous le menu (et stackable, sur petit écran les élts du menu s'étalent vers le bas). Avec (comme ici), un [inverted text menu] (transparent) court (2 ou 3 entrées et de petits icones), cela peut passer. Moins bien avec un [icon menu]. Donc :
  • /* modif */ de semantic.css sur fixed menu : width pas à 100% obligatoirement (il faut ajouter .width100 à la class). Cela permet de faire un petit menu déroulant fixe discret dans le coin qui ne recouvre pas la page quand elle est dessous, ce qui n'empêche pas de la lire mais est énervant quand on veut cliquer sur un lien qui se trouve dessous ! Par exemple ici, à width 100% le " message" fixé en bas à gauche empêche de cliquer sur les liens du footer. Sans width à 100% c'est ok. Cela permet sans gêner de faire un menu simple ou "sidebar" toujours dispo.
  • Menu "sidebar" avec semantic.js ↣