CSS navbar: Comment avez-vous la page, sélectionnez le bouton?

  • locust
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Avr 02, 2007
  • Messages: 44
  • Loc: Austin, TX
  • Status: Offline

Message Janvier 3rd, 2009, 1:59 pm

Bonjour,

J'ai une navbar Im qui travaille, mais je ne peux pas savoir comment faire pour que le bouton sélectionné pour la page en cours. Par exemple, si lorsque vous atterrissez sur la page d'accueil, je veux avoir le "home" sur la navbar sélectionné. Je veux le faire pour chacune des pages.

Merci.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Janvier 3rd, 2009, 1:59 pm

  • locust
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Avr 02, 2007
  • Messages: 44
  • Loc: Austin, TX
  • Status: Offline

Message Janvier 3rd, 2009, 3:22 pm

Nevermind...
  • spork
  • Brewmaster
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Sep 22, 2003
  • Messages: 6130
  • Loc: Seattle, WA
  • Status: Offline

Message Janvier 5th, 2009, 12:47 am

Si vous avez tout compris, la prise en charge de partager votre solution afin que les futurs visiteurs à ce sujet savent que faire?
The Beer Monocle. Classy.
  • locust
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Avr 02, 2007
  • Messages: 44
  • Loc: Austin, TX
  • Status: Offline

Message Janvier 12th, 2009, 12:23 am

Ok, voici la solution:

Premièrement, le CSS:
Code: [ Select ]
div#navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div#navigation a{
    display: block;
    width: 170px;
    height: 40px;
    line-height: 36px;
    color:#000000;
    text-decoration: none;
    background-image: url(images/button.jpg);
    background-repeat:no-repeat;
    background-position: left;
    text-indent: 35px;
}

div#navigation a:hover{
background-position: right;
color: #fff;
}

div#navigation a#current {
    background-position: right;
    color: #fff;
}
  1. div#navigation ul {
  2.     margin: 0;
  3.     padding: 0;
  4.     list-style-type: none;
  5. }
  6. div#navigation a{
  7.     display: block;
  8.     width: 170px;
  9.     height: 40px;
  10.     line-height: 36px;
  11.     color:#000000;
  12.     text-decoration: none;
  13.     background-image: url(images/button.jpg);
  14.     background-repeat:no-repeat;
  15.     background-position: left;
  16.     text-indent: 35px;
  17. }
  18. div#navigation a:hover{
  19. background-position: right;
  20. color: #fff;
  21. }
  22. div#navigation a#current {
  23.     background-position: right;
  24.     color: #fff;
  25. }


Aller à http://www.austinclassicalballet.com pour voir ce qui Im parle. Lorsque vous y allez, vous les verrez que l'étoile à côté du bouton d'accueil sur la barre de navigation est noir, ce qui indique que vous êtes sur la page en cours.

Pour ce faire, j'ai créé un id nommé "courant" (voir définition ci-dessus) et a dû fixer les id dans la doc / index.htm. Ce n'est pas une solution très élégante, mais Im pas sûr de quelle autre façon de le faire sans l'aide d'un langage de script et / ou côté serveur inclut. Le site n'est pas assez grande pour justifier une technologie côté serveur, donc je traite seulement avec le fait que je dois modifier le code barre de nav pour chaque page.

Dans un même registre, j'ai utilisé des modèles dans Dreamweaver afin que je n'ai pas de modifier toutes les pages si je change quelque chose qu'ils partagent tous, comme la bannière ou pied de page. Habituellement, cela est le cas de la barre de navigation, mais depuis que j'ai eu pour choisir l'ID pour chaque page, j'ai créé la barre de navigation dans une zone modifiable dans le modèle. Je ne sais pas pourquoi vous this cela Im...peut-être que je pense Cleaver Im ou quelque chose ..
  • locust
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Avr 02, 2007
  • Messages: 44
  • Loc: Austin, TX
  • Status: Offline

Message Janvier 12th, 2009, 12:24 am

Quiconque a une solution plus élégante pour cela? Peut-être en utilisant Javascript ou quelque chose qui ne CSS guruss connaître?
  • honeyham
  • Novice
  • Novice
  • No Avatar
  • Inscription: Jan 15, 2009
  • Messages: 16
  • Status: Offline

Message Janvier 27th, 2009, 4:34 pm

Hmm...Je crois que vous pouvez obtenir le même résultat en cliquant sur "ajouter", "l'image des objets" et "la barre de navigation". Là, vous pouvez ajouter des boutons différents ur avec les différents Etats. Si vous voulez indiquer que vous êtes sur la "home page...vous pouvez cocher la case qui dit "montrer à l'image d'abord".

Après l'insertion d'une barre de navigation, et que vous voulez modifier...aller à "modifier", "barre de navigation".
  • tastysite
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Avr 09, 2008
  • Messages: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Message Février 6th, 2009, 1:59 pm

Vous mai être en mesure d'utiliser PHP comme somting
Code: [ Select ]
 
if(isset($_GET['page']))
$page = $_GET['page']
 
if($page == home){print "<img scr='thisone.gif'/>"}
ifelse{...}
 
  1.  
  2. if(isset($_GET['page']))
  3. $page = $_GET['page']
  4.  
  5. if($page == home){print "<img scr='thisone.gif'/>"}
  6. ifelse{...}
  7.  

Il ya une meilleure façon proble autour d'elle, mais j'ai tendance à faire cela à la place: --
Code: [ Select ]
 
You are on page <?php $page ?>
 
  1.  
  2. You are on page <?php $page ?>
  3.  

Vous définissez $ page que la page d'identification que vous êtes sur la note que vous devez utiliser la commande php (que je ne) en tant que moyen de naviguer sur votre site.
^__^

Afficher de l'information

  • Total des messages de ce sujet: 7 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 100 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC