-
Tableau à onglets - CSS
Un tableau à onglets, tout en CSS....
On y met tout contenu:
Texte, liens, vidéo, audio, etc...
Avec apparition en "effet slide"...
Pratique et utile.
-
Commentaires
12SliverMercredi 9 Décembre 2015 à 17:08Bonjour,
Dans les onglets je voudrais mettre une image à la place du texte mais du coup tout bug les onglets ne sont plus du tout pareille. Quelqu'un à une idée?
Merci d'avance
Bonjour Mike, je serai intéressée par ton menu coulissant pour tablette, où puis je le trouver ?
Merci à toi et bon mardi, Flo
-
Mardi 1er Décembre 2015 à 11:08
Salut Flo !
Ah, oui....j'ai un peu oublié de faire un article pour ce menu !!!!
Je colle les codes ci-dessous en attendant.
Donc on utilise un menu-droite, qui est caché et activé par js .
Bien entendu pour les tablettes il faut activer la version standard ...!<!----------------------Menu-lateral-On-Off--------------------------------->
<style><!--
#menu1 {
position:fixed;
right:-265px;
top:40px;
width:0px;
border:2px solid grey;
background-color:#282724;
z-index:100;
transition:0.5s;
}
#menu1:before {
position:relative;
right:25px;
content:"◄";
background-color:white;
padding:2px;
z-index:110;
}
/*-------------------
#menu1:hover {
right:0px;
border:1px dotted grey;
transition:1s;
}
#menu1:hover#menu1:before {
content:"►";
color:white;
background-color:brown;
}--------------------------*/
#ulmodules {
margin-right:-250px;
}
.module_contenu_block {
overflow: visible;
width: 100%;
}
#menu1 a{color:white;font-style:normal;}
#menu1 a:hover{color:grey;}
/*-------------------Menu-On-Off------------------*/
#menu-on {
position:fixed;
top:30px;
right:30px;
background-color:white;
border-radius:5px;
padding:0px 2px;
padding-right: 8px;
box-shadow: 6px 6px 10px black;
transition:1s;
}
#menu-on:hover {
background-color:#2ecc71;
color:white;
box-shadow: -6px 6px 10px black;
transition:1s;
}
#menu-off {
display:none;
position:fixed;
top:30px;
right:30px;
background-color:white;
border-radius: 5px;
padding:0px 2px;
box-shadow: 6px 6px 10px black;
transition:1s;
}
#menu-off:hover {
background-color:#c0392b;
color:white;
box-shadow: -6px 6px 10px black;
transition:1s;
}
#menu-off a, #menu-on a {
font-weight: initial;
font-style: normal;
text-decoration: none;
font-variant: normal;
color: #081501;
transition:1s;
}
#menu-off a:hover, #menu-on a:hover {
color:white;
transition:0.5s;
}
--></style>
<div id="menu-on" title="Voir menu" onclick="$('menu1').style.right = '0px';$('menu-off').style.display = 'block';$('menu-on').style.display = 'none';$('menu1').style.width = '250px';"><a href="#nogo"><img style="width: 30px;" src="http://ekladata.com/CHkmfpA3qK52iSwAlpBeDX12n1g.png" alt="" />ON</a></div>
<div id="menu-off" title="Cacher menu" onclick="$('menu1').style.right = '-265px';$('menu-off').style.display = 'none';$('menu-on').style.display = 'block';$('menu1').style.width = '0px';"><a href="#nogo"><img style="width: 30px;" src="http://ekladata.com/CHkmfpA3qK52iSwAlpBeDX12n1g.png" alt="" />OFF</a></div>
-
Bonjour
Géniale cette présentation, ça réduit la longueur des articles en les condensant !
Je te l'emprunte pour faire des tests et si ça marche, j'adopte pour mes articles de randonnées et même ceux de tourisme, pourquoi pas.
Merci de ton aide, c'est très sympa de mettre des sources en "libre service", surtout lorsqu'ils sont de qualité
Maintenant je vais essayer de comprendre ce que tu as fait !
@lain
Tu parles ke je l'ai vu , c la classe lol
mais bon jaime bien mon menu coulissant ke jai fait d'apres ton deezer coulissant, tu te rappelles !!!
Bah ouaips, LGR c'est plus rapide !!!
Comment va ???
T'as vu aussi mon menu latéral droit coulissant....spécial tablette et smartphone.
Et oui, le hover CSS c'est pas pratique avec les écrans tactiles.
Sinon, va falloir se mettre grave à Bootstrap (http://getbootstrap.com/).
Y a plus que ça maintenant sur les sites et ici (because : sites responsives...Responsive Web design)...
@+c cool ici aussi , effet interactif avec ces codes css
je prends ton code et je teste lol voir jy jaurai utilisation sur un de mes blogs
merci @ +
j'ai trouvé pour
LGR
C4EST INITIAL DE MON PSEUDO, ke j'peux etre nul mdr !!!
Ajouter un commentaire
c'est par ici ke je te passe le bonjour lol
Tu connais la chanson,
♪je vais bien ,
tout va bien ♫
♫Tout est okéééé♫♪ mdr !!
@+
..... !!!