Barre de navigation photoshop
ruben06
-
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
Salut a tous,
Je voudrais créer une barre de navigation du style de comment ca marche sous photoshop.
J'ai un problème pour le découpage de ma barre je en sais pas comment m'y prendre je ne sais donc pas non plus comment réaliser l'effet hover au survol de la souris.
Si quelqu'un aurait un bon tuto (j'en ai lu quelques uns pas très explicites sur le sujet...) ou une explication
Merci d'avance.
Je voudrais créer une barre de navigation du style de comment ca marche sous photoshop.
J'ai un problème pour le découpage de ma barre je en sais pas comment m'y prendre je ne sais donc pas non plus comment réaliser l'effet hover au survol de la souris.
Si quelqu'un aurait un bon tuto (j'en ai lu quelques uns pas très explicites sur le sujet...) ou une explication
Merci d'avance.
A voir également:
- Barre de navigation photoshop
- Navigation privée - Guide
- Supprimer les données de navigation - Guide
- Adobe photoshop - Accueil - Applications & Logiciels
- Windows 11 barre des taches a gauche - Guide
- Photoshop pour pc - Télécharger - Montage photo
12 réponses
Biensûr, PHP pour quelque-chose censé être visible sur le navigateur !
C'est tout à fais faisable en (x)HTML/CSS, inutile de sortir Javascript avec les attributs onmouseover et onmouseout (ah oui, en parlant d'attribut, sans majuscules c'est mieux).
Si tu veux quelques exemples :
https://css.developpez.com/galerie/?page=menus-horizontaux
C'est tout à fais faisable en (x)HTML/CSS, inutile de sortir Javascript avec les attributs onmouseover et onmouseout (ah oui, en parlant d'attribut, sans majuscules c'est mieux).
Si tu veux quelques exemples :
https://css.developpez.com/galerie/?page=menus-horizontaux
Quel langage ? Php ?
Si oui, je sais pas si c'est la meilleure solution mais moi je fais comme cela :
<A HREF="AccueilMembre.php" onMouseOver="Accueil.src='Boutons/Accueil2.png'" onMouseOut="Accueil.src='Boutons/Accueil.png'">
<IMG SRC="Boutons/Accueil.png" BORDER=0 NAME="Accueil" ALT="Accueil" width = 80% VSPACE=0></A>
Voila, Accueil.png est le bouton initial, Accueil2.png est le bouton affiché au survol.
Tu met juste un fond différent pour les deux boutons et ça te donne un truc sympa ;)
Si oui, je sais pas si c'est la meilleure solution mais moi je fais comme cela :
<A HREF="AccueilMembre.php" onMouseOver="Accueil.src='Boutons/Accueil2.png'" onMouseOut="Accueil.src='Boutons/Accueil.png'">
<IMG SRC="Boutons/Accueil.png" BORDER=0 NAME="Accueil" ALT="Accueil" width = 80% VSPACE=0></A>
Voila, Accueil.png est le bouton initial, Accueil2.png est le bouton affiché au survol.
Tu met juste un fond différent pour les deux boutons et ça te donne un truc sympa ;)
Merci pour vos aides.
J'ai trouve un code sur les exemples que tu m'a proposé mais je n'arrive pas a faire en sorte que seul le lien cliqué (le lien correspondant a la page ou je suis) soit coloré en bleu.
Voici le lien qui correspond au menu intégré, je voudrais donc que lorsque je suis sur une un onglet ce dernier soit comme le "service".
J'ai trouve un code sur les exemples que tu m'a proposé mais je n'arrive pas a faire en sorte que seul le lien cliqué (le lien correspondant a la page ou je suis) soit coloré en bleu.
Voici le lien qui correspond au menu intégré, je voudrais donc que lorsque je suis sur une un onglet ce dernier soit comme le "service".
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
C'est faisable avec du PHP mais ça nécessite d'être dans une configuration précise.
Voilà comment je ferai par exemple:
Tu fais une page index.php qui contient ta mise en page de base.
Dans la partie correspondant au contenu, tu places un code php te permettant d'en changer le contenu suivant une variable contenu dans l'url.
Par exemple:
Via un url rewriting, tu modifie l'url en accueil.html
Pour le menu, qui sera donc dans le fichier index.php, tu places des conditions pour modifier l'affichage des liens via un CSS spécifique.
Exemple:
Pas forcement facile à mettre en place si tu n'as pas de connaissance en PHP mais je connais pas ton niveau.
Voilà comment je ferai par exemple:
Tu fais une page index.php qui contient ta mise en page de base.
Dans la partie correspondant au contenu, tu places un code php te permettant d'en changer le contenu suivant une variable contenu dans l'url.
Par exemple:
index.php?page=accueil
Via un url rewriting, tu modifie l'url en accueil.html
Pour le menu, qui sera donc dans le fichier index.php, tu places des conditions pour modifier l'affichage des liens via un CSS spécifique.
Exemple:
<a href="accueil.html" <?php
if($_GET['page']=='accueil')
{
echo'id="menu_view"';
}
else{
echo'class="menu"';
}
?>>Accueil</a>
Pas forcement facile à mettre en place si tu n'as pas de connaissance en PHP mais je connais pas ton niveau.
Oui je maitrise plus ou moins php et je vais essayer de faire ca je vous tient au courant.
Merci beaucoup !
Merci beaucoup !
Pour la gestion des pages en passant par l'url, tu peux t'inspirer de ce tuto: http://phpdebutant.org/article68.php
Par contre je ne sais pas si tu as bien saisi le code mais moi j'ai une marge sous la barre de navigation que je ne vois pas du tout dans le code si jamais tu la trouve ca serai nikel ;)
Une marge?
Je dirai que ça dépends surtout du CSS que tu utilises. Mon code n'influant en rien le visuel du menu.
Tu peux bien sur changer les nom que j'ai mis dans mon exemple pour le CSS correspondant aux deux affichages.
id="menu_view" correspond à la page affiché actuellement
class="menu" corresponds aux autres liens du menu
Si tu ne les changes pas, fais attention qu'ils ne soient pas déjà défini dans ton CSS.
Je dirai que ça dépends surtout du CSS que tu utilises. Mon code n'influant en rien le visuel du menu.
Tu peux bien sur changer les nom que j'ai mis dans mon exemple pour le CSS correspondant aux deux affichages.
id="menu_view" correspond à la page affiché actuellement
class="menu" corresponds aux autres liens du menu
Si tu ne les changes pas, fais attention qu'ils ne soient pas déjà défini dans ton CSS.
Non je parlais du code css de base, pas du code php que tu me propose.
il y a une marge importante sous la barre de navigation toute prête que j'ai intégrer a mon code.
Je pensais avoir mi le code avec le message mais apparament j'ai du faire une fausse manip.
Voici le code:
il y a une marge importante sous la barre de navigation toute prête que j'ai intégrer a mon code.
Je pensais avoir mi le code avec le message mais apparament j'ai du faire une fausse manip.
Voici le code:
ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
ul#saturday li{display:block;float:left;margin:0;padding:0;}
ul#saturday li a{display:block;float:left;color:#292929;text-decoration:none;padding:12px 20px 20px;height:24px;background:transparent url("images/bgDIVIDER.gif") no-repeat top right;}
/*ul#saturday li a:hover{background:transparent url("images/bgHOVER.gif") no-repeat top right;} */
ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("images/bgON.gif") no-repeat top right;}
la page n'est malheureusement pas en ligne.
Voici le html:
<code>
<div id="home">
<!-- l'en-tete -->
<img src="test_banniere.gif" class="marges">
<div id="en-tete" >
<div id="menucase">
<ul id="saturday">
<li><a href="index.html" title="" class="current" >Accueil</a></li>
<li><a href="horaires.html" title="">Horaires</a></li>
<li><a href="liens.html" title="">Liens</a></li>
<li><a href="mikve.html" title="">Mikvé</a></li>
<li><a href="question.html" title="">Question au Rav</a></li>
<li><a href="inscription.html" title="">Inscription</a></li>
<li><a href="presentation.html" title="">Prestations</a></li>
<li><a href="dons.html" title="">Dons</a></li>
<li><a href="contacts.html" title="">Contact</a></li>
</ul>
</div>
</div>
<!-- Fin de l'en-tete -->
Voici le html:
<code>
<div id="home">
<!-- l'en-tete -->
<img src="test_banniere.gif" class="marges">
<div id="en-tete" >
<div id="menucase">
<ul id="saturday">
<li><a href="index.html" title="" class="current" >Accueil</a></li>
<li><a href="horaires.html" title="">Horaires</a></li>
<li><a href="liens.html" title="">Liens</a></li>
<li><a href="mikve.html" title="">Mikvé</a></li>
<li><a href="question.html" title="">Question au Rav</a></li>
<li><a href="inscription.html" title="">Inscription</a></li>
<li><a href="presentation.html" title="">Prestations</a></li>
<li><a href="dons.html" title="">Dons</a></li>
<li><a href="contacts.html" title="">Contact</a></li>
</ul>
</div>
</div>
<!-- Fin de l'en-tete -->
