Question en CSS
Résolu/Fermé
WhiiTe
Messages postés
92
Date d'inscription
vendredi 8 mai 2015
Statut
Membre
Dernière intervention
8 mars 2016
-
20 mai 2015 à 17:57
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 23 mai 2015 à 02:51
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 23 mai 2015 à 02:51
A voir également:
- Question en CSS
- Enlever couleur lien css ✓ - Forum CSS
- Mettre une image à gauche css ✓ - Forum CSS
- Css exposant ✓ - Forum CSS
- Css download - Télécharger - HTML
- Déplacer une image css - Forum CSS
3 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 22/05/2015 à 06:39
Modifié par animostab le 22/05/2015 à 06:39
Kyser soze t'a donné une partie de la solution sauf qu'en plus il faut récupérer l'url de la page en cour et appliquer le style uniquement à l'élément a href qui correspond a cette url
Voici un exemple en jquery
on imagine que ton code de menu est celui ci
1) tu crée un style dans ton css ou tu définis ce à quoi tu veux que ressemble l'element du menu correspondant à la page active tu nomme cette class "active"
2) colle ce script dans un fichier que tu appelles active.js à la racine du site (récupère sous forme de variable la partie de l'url arès le nom-de-domaine/ , applique la class active et retire la class menu au a href correspondant. Empeche le clic sur active
3) dans la section <head> de la page tu appelles la bibliothèque jquery et le script
Voila
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Voici un exemple en jquery
on imagine que ton code de menu est celui ci
<a href="page1.html" class="menu">page1</a>
1) tu crée un style dans ton css ou tu définis ce à quoi tu veux que ressemble l'element du menu correspondant à la page active tu nomme cette class "active"
.active {
....;
....;
}
2) colle ce script dans un fichier que tu appelles active.js à la racine du site (récupère sous forme de variable la partie de l'url arès le nom-de-domaine/ , applique la class active et retire la class menu au a href correspondant. Empeche le clic sur active
$(document).ready (function() {var path = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$('a[href="'+ path +'"]').addClass("active").removeClass("menu"); $(".active").click(false);})
3) dans la section <head> de la page tu appelles la bibliothèque jquery et le script
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="active.js"></script>
Voila
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
20 mai 2015 à 22:01
20 mai 2015 à 22:01
Bonjour
Tu veux dire que l'élément du menu correspondant à la page en cours soit plus grand ?
ou bien l'élément de menu devient plus grand quand on passe la souris dessus ?
Parce que la impossible de comprendre ta question même avec l'aperçu.
Tu veux dire que l'élément du menu correspondant à la page en cours soit plus grand ?
ou bien l'élément de menu devient plus grand quand on passe la souris dessus ?
Parce que la impossible de comprendre ta question même avec l'aperçu.
WhiiTe
Messages postés
92
Date d'inscription
vendredi 8 mai 2015
Statut
Membre
Dernière intervention
8 mars 2016
21 mai 2015 à 17:11
21 mai 2015 à 17:11
Je pense avoir été clair, la case s'agrandit déjà quand on passe la souris dessus, je veux que quand l'utilisateur est sur la page "contact" dans le menu l'élément contact est plus grand ou avec des bordures à coté, je verrai sa après ^^
Utilisateur anonyme
21 mai 2015 à 17:21
21 mai 2015 à 17:21
Salut,
Le plus intuitif serait de définir deux styles dans ton css, un pour la catégorie courante (contact si on est sur la page contact par exemple) et un style pour toutes les autres.
Puis dans un second temps je définirais une fonction javascript qui change dynamiquement la classe de la div sur laquelle tu clic pour y associer le style définit qui sera dans ton cas entouré surligné ou autre..
Le plus intuitif serait de définir deux styles dans ton css, un pour la catégorie courante (contact si on est sur la page contact par exemple) et un style pour toutes les autres.
Puis dans un second temps je définirais une fonction javascript qui change dynamiquement la classe de la div sur laquelle tu clic pour y associer le style définit qui sera dans ton cas entouré surligné ou autre..
WhiiTe
Messages postés
92
Date d'inscription
vendredi 8 mai 2015
Statut
Membre
Dernière intervention
8 mars 2016
21 mai 2015 à 20:23
21 mai 2015 à 20:23
Je n'ai pas compris le premier paragraphes de ta réponse, et pour le Javascript tu pourrai me donner le code ou autre ? (je suis nul en JS ^^)
22 mai 2015 à 16:06
22 mai 2015 à 16:25
Je comprend rien :^)
Modifié par animostab le 22/05/2015 à 17:19
c'est la description de ce que fait le script active.js !
le 1) tu fais ca dans ton fichier css (sais tu ce qu'est un fichier css?)
le 2) tu ouvres le bloc note windows tu colles le code 2) dedans tu enregistres et renommes ce fichier active.js et tu le mets à la racine de ton site.
le 3) tu colles le code 3) dans la section <head> de toutes tes pages
qu'est ce que tu utilise our créer ton site ?
utilises tu la fonction include() de php ?
parce que au vu de tes réponses: je pense que tu devrais apprendre html / css et les bases de jquery /javascript car tu sera vite bloqué sans ca
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641
http://openclassrooms.com/courses/jquery-ecrivez-moins-pour-faire-plus
22 mai 2015 à 18:12
Je comprend pas le :
récupère sous forme de variable la partie de l'url arès le nom-de-domaine/ , applique la class active et retire la class menu au a href correspondant. Empeche le clic sur active
22 mai 2015 à 18:13