11488 sujets

JavaScript, DOM et API Web HTML5

JQUERY - Retirer CSS dans liens

Bonjour, je suis en train de réaliser une colonne de menu pour un site internet que je suis en train de réaliser et j'utilise jquery pour ouvrir les menus afin de les faire apparaitre.

Je débute doucement dans le JS et j'avoue que je suis coincé car mes case de menus contiennent une balise span permettant l'ascenceur et contenant mes images de fond mais lorsque je mets un lien dans mes textes en dessous, ceux-ci prennent le CSS du span et je me retrouve avec des liens ayant le meme fond que les spans.

Comment puis je faire pour que mes liens ne prennent pas en compte le span ou le CSS tooglemenu ?

En liens mes images utlisées pour ce design

http://www.picdo.net/fichiers/2009/10/15/43518a32-de6d-40fa-aa92-bde3fe3d7650_bg_column.gif
http://www.picdo.net/fichiers/2009/10/15/43518a32-de6d-40fa-aa92-bde3fe3d7650_bg_column.gif

http://www.picdo.net/fichiers/2009/10/15/2aea79f8-2abc-4996-acdd-1da0d983bfdd_column_bottom.gif
http://www.picdo.net/fichiers/2009/10/15/2aea79f8-2abc-4996-acdd-1da0d983bfdd_column_bottom.gif

http://www.picdo.net/fichiers/2009/10/15/92630813-24a5-49e6-b438-5046b1b7af35_column_top1.gif
http://www.picdo.net/fichiers/2009/10/15/92630813-24a5-49e6-b438-5046b1b7af35_column_top1.gif

http://www.picdo.net/fichiers/2009/10/15/c07b57bb-cd8f-45af-a431-9d2a94c16ea5_column_top2.gif
http://www.picdo.net/fichiers/2009/10/15/c07b57bb-cd8f-45af-a431-9d2a94c16ea5_column_top2.gif

Voila mon CSS qui est lié à la page à la colonne
#column {
	background-image:url(img/bg_column.gif);
	width:285px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}

#column a {
	color:#FFF;
	text-decoration:none;
}

#column a:hover {
	color:#FFF;
	text-decoration:underline;
}

	.toggleSubMenu {
		color:#000;	
	}
   .navigation a, .navigation span { 
      display: block; 
      color: #fff; 
      text-decoration: none; 
	  width:285px;
	  background-repeat:repeat-y;
      }
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span { 
      background-image: url(img/column_top1.gif); 
	  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	  font-size:18px;
	  height:43px;
	  font-weight:bold;
	  padding-left:17px;
	  padding-top:2px;
      } 
   .navigation .open a, .navigation .open span { 
      background-image: url(img/column_top2.gif); 
      } 
   .navigation a:hover, .navigation a:focus, .navigation a:active { 
      text-decoration: underline; 
      } 
   .navigation .subMenu { 
      font-size: 11px; 
	  background-image:url(img/bg_column.gif);
	  color:#FFF;
      } 
   .navigation ul.subMenu a { 
      background: none; 
      }


et voila ma page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Document sans nom</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".navigation div.subMenu:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation div.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".navigation div.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("div.subMenu:visible").length != 0) { 
            $(this).next("div.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation div.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("div.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
 
} ) ; 
// --> 
 
</script>
</head>

<body>
<div id="column">
<div class="navigation"> 
<div class="toggleSubMenu"><span>&nbsp;NAVIGATION Principale</span>
  <div class="subMenu">
&nbsp;&bull; Accueil
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Services<br />
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Annonces<br />
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Contact
</div>
</div> 
<div class="toggleSubMenu"><span>&nbsp;VÉHICULES</span>
  <div class="subMenu">
&nbsp;&bull; Mustang
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Dodge<br />
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Chrysler<br />
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Contact
</div>
</div> 
<div class="toggleSubMenu"><span>&nbsp;CATALOGUE</span>
  <div class="subMenu">
&nbsp;&bull; Accueil
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Services<br />
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Annonces<br />
<img src="img/dots.gif" vspace="3"/><br />
&nbsp;&bull; Contact
</div>
</div> 

</div>
<img src="img/column_bottom.gif" width="285" height="50" /></div>
</body>
</html>

Modifié par chouk57 (15 Oct 2009 - 12:01)
Salut,

Dans le css tu as mit
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {  
      background-image: url(img/column_top1.gif);  
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
      font-size:18px; 
      height:43px; 
      font-weight:bold; 
      padding-left:17px; 
      padding-top:2px; 
      }

Ce qui fait que les lien on la même image de fond que les pan, il faut préciser l'image de fond uniquement pour les span.
Modifié par jo_link_noir (17 Oct 2009 - 23:25)
Merci pour ta réponse, donc en gros il faudrait que je fasse un truc dans ce style :


.navigation .toggleSubMenu span {   
      background-image: url(img/column_top1.gif);   
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;  
      font-size:18px;  
      height:43px;  
      font-weight:bold;  
      padding-left:17px;  
      padding-top:2px;  
      }

.navigation .toggleSubMenu a {
      background-color:#FFAA00;
      color:#000000;
      }


Ce qui permettrait en gros d'avoir un CSS pour les liens ET pour les SPAN c'est bien ça ?

EDIT : ça marche pas Smiley decu
Modifié par chouk57 (19 Oct 2009 - 11:25)
Oui, au passage y a la même chose à 2 autres endroits.

Mais tu parles de quel lien en fait, ceux ajouter avec le js (dans le span) ou ceux qui devrait être présent et que je voit pas... ?
Si on parle du second, c'est du coté de ".subMenu a" qui faut chercher.

Y bien ça dans le css mais vu qu'il n'y a ni ul ni de .navigation, ça ne marche pas.
.navigation ul.subMenu a {  
      background: none;  
      } 

/*à remplacer par un truc du genre*/

.toggleSubMenu .subMenu a {  
      background: none;  
      }


Pourquoi ne pas avoir gardé un menu sous forme de liste ?
En fait ce que j'essaye de faire c'est quand on clique sur les barres, la colonne s'ouvre pour afficher des sous-menus en texte dirigeant vers des pages du site. je sais pas si tu as compris exactement. Après si tu as une méthode différente je suis preneur Smiley cligne
ah oui autant pour moi donc la colonne serait dans le genre :

<div class="navigation"> 
  <div class="toggleSubMenu"><span> MENU</span>
    <div class="subMenu">
       <a href="#">• Accueil</a><br />
      <img src="img/dots.gif" vspace="3"/><br />
       <a href="#">• Services</a><br />
      <img src="img/dots.gif" vspace="3"/><br />
       <a href="#">• Annonces</a><br />
      <img src="img/dots.gif" vspace="3"/><br />
       <a href="#">• Contact</a><br>
      <br>
<br />
    </div>
  </div> 
  <div class="toggleSubMenu"><span> VÉHICULES</span>
    <div class="subMenu">
       • Pontiac GTO<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • AMC Javelin<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • AMC AMX<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • AMC Rebel<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Pontiac Firebird<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Pontiac Trans Am<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Pontiac GTO<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Dodge Charger<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Dodge Challenger<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Dodge Coronet<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Dodge Superbee<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Dodge Dart<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Dodge Demon<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Plymouth Barracuda<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Plymouth GTX<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Plymouth Roadrunner<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Plymouth Duster<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Chevrolet Chevelle SS<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Chevrolet Camaro<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Buick GS/GSX<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Oldsmobile 4-4-2<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Ford Mustang ShelbyGT350<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Ford Mustang GT500<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Ford Mustang Mach 1<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Ford Mustang Boss<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Oldsmobile Cutlass<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Pontiac Beaumont<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Chevrolet Nova<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Ford Fairlane GT<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Ford Torino GT et Cobra<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Mercury Cougar<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Shelby GT Series<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Mercury Cyclone Spoiler<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Mercury Comet<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Chevrolet Impala<br>
      <br>
<br />
    </div>
  </div> 
  <div class="toggleSubMenu"><span> CATALOGUE</span>
    <div class="subMenu">
       • Dodge<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Plymouth<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Chevrolet<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Ford<br />
      <img src="img/dots.gif" vspace="3"/><br />
       • Pontiac<br />
    </div>
  </div> 
</div>
<img src="img/column_bottom.gif" width="285" height="50" />
Tien, j'ai oublié, tu pourrais donné une image du rendu avec le problème et sans Smiley lol ?

Il ce passe quoi en ajoutant ça ?
.navigation .toggleSubMenu .subMenu a {
    background-color:red;
}
les liens se retrouvent avec un fond rouge mais en gardant la taille de la police, l'espacement, bref tout le CSS de mes menus Smiley decu

Regarde par toi mm

LIEN

EDIT : En gros j'aimerais en fait que ma colonne "ressemble" (du moins le fonctionnement) aux menus "Quoi de neuf...", "pré-requis", etc. de cette page : LIEN
Modifié par chouk57 (29 Oct 2009 - 09:35)
Ok je comprend mieux d'où vient l'erreur

// et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation div.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ;

Ici il faudrait mettre html au lieu de replaceWith pour gardé le span
// et on ajoute à l'élément span un lien : 
    $(".navigation div.toggleSubMenu span").each( function () { 
        $(this).html('<a href="#" title="Afficher le sous-menu">' + $(this).text() + '</a>') ; 
    } ) ;


Et ensuite dans le css
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {  
      [...]
      }

À remplacer par
.navigation .toggleSubMenu span {  
      [...]
      }


Avec ça devrait y avoir du mieux.


Par contre je trouve la structure du menu je la trouve louche... Tu devrais virer les images de pointiller et les passé en css de fond sur le lien et transformer le lien en type block (display:block). Et virer les vspace="3" à mettre en css avec padding-left/rigth ou margin-left/rigth Mais bon, c'est toi qui voit...
Sujet clos
Aller à