Sujet Précédent Sujet Suivant

Bouton qui descend en dessous du menu et fait partie de la barre

Résolu/Fermé
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 - 23 déc. 2014 à 12:22
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 - 26 déc. 2014 à 09:39
Bonjour a tous,
J'aimerais pouvoir mettre un bouton dans mon menu qui descendrai juste en dessous (pas un menu déroulant), sa serait un bouton supplémentaire.
Si je vous sollicite c'est parce que je n'ai vraiment aucune idée comment m'y prendre, c'est la première fois qu'on me demande sa en programmation et je sais que c'est possible car je l'ai déjà vu dans plusieurs site. Bien sur le code ici sera en html.
voici si joint une photo de ma barre de navigation avec un petit dessin montrant ou je voudrais mettre mon bouton (fait avec paint:p).
Merci pour votre aide.
En espérant que ce sujet servira a d'autres personnes après moi en effet je pense que c'est assez utile comme disposition de bouton pour des promo ou des ventes flash, sa se démarque bien.
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
23 déc. 2014 à 12:54
Bonjour,

Je ne comprend pas trop...
Ton bouton sera directement visible SOUS ton menu .. et contiendra une Liste déroulante ? Ou bien.. ton bouton sera SUR ton menu ( comme le menu "Bilan Thermique" ) ?

Quoi qu'il en soit.. si tu fais "pareil" que pour "Bilan Thermique" .. tu n'as qu'à copier son code et le modifier pour tes besoins...
Si c'est autre chose.... il va falloir le coder....
HTML + CSS ( et peut être un peu de Javascript..)

Première étape :
Nous montrer le code source du MENU existant

NB: Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Deuxième étape : Nous indiquer très CLAIREMENT ce que tu souhaites obtenir...
- La position du bouton par rapport au menu
- A quel moment apprait il ? ( est il toujours visible ? )
- Ce qu'il contient ( lorsqu'on clique dessus.. qu'est ce qu'il affiche ??)






0
Réponse 2 / 3
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 1
Modifié par jordane45 le 23/12/2014 à 14:20 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
    <a class="navbar-brand" href="index.html">Power Eco France</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="a propos.html">À propos</a>
                    </li>
                    <li>
                        <a href="services.html">Services</a>
                    </li>
     <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bilan thermique <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="bilan thermique.html">Bilan thermique</a>
                            </li>
       <li>
                                <a href="pourquoi.html">Pourquoi ?</a>
                            </li>
                            <li>
                                <a href="comment.html">Comment ?</a>
                            </li>
                        </ul>
                    </li>
     <li>
                        <a href="rdv.html">Prendre un RDV</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
     <li>
                        <a href="faq.html">FAQ</a>
                     </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Autres <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="structure.html">structure</a>
                            </li>
                            <li>
                                <a href="tarifs.html">Tarifs</a>
                            </li>
       <li>
                                <a  href="CODES/ADMIN/connexion.html"><span class="glyphicon glyphicon-user"></span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>



j'aimerais en faite que le bouton se situe juste en dessous de ma barre de menu comme je l'ai indiquer sur la photo que j'ai postez, se sera une bouton unique de redirection vers une autre page sans menu déroulant.
j'espere que j'aurais ete le plus clair possible.
0
Réponse 3 / 3
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
23 déc. 2014 à 14:32
J'ai l'impression que tu utilises BootStrap pour gérer le CSS...
Dans ce cas.. tu n'aurais qu'à mettre un truc de ce genre ( après ton menu ) 

<div class="col-sm-2 col-lg-2 col-xs-2 col-xs-offset-0 col-md-offset-4 col-lg-offset-4 col-sm-offset-2">
<div class="btn-group btn-group-justified"  aria-label="Justified button group" role="group">
    <a class="btn btn-default" role="button" href="url_de_la_page_html">
        Texte du bouton
    </a>
</div>
</div>


Puis à joueur sur le style/css (les col-*-offset) du premier DIV pour le positionner là où tu le souhaites
0
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 1
23 déc. 2014 à 14:40
exactement merci je n'y avait pas du tout penser mais c'est exactement sa (c'est la reaction que l'on fait tous en voyant la reponse :p)
merci.
0
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 1
23 déc. 2014 à 14:43
juste par contre je viens de le faire mais sa me cree une ligne speciale pour le bouton est ce que tu connait le code a mettre justement pour que le bouton soit supperposer en avant de la page (sa veut dire que mon bouton se retrouve sur les ecriture ou les photo de ma page au lieu que sa cree une ligne entiere que pour le bouton)
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019
23 déc. 2014 à 15:00
Je n'ai pas de Bootstrap sous la main pour tester..
Mais peut être qu'en ajoutant la class : navbar-fixed-top dans le premier DIV il devrait pouvoir se fixer (tout comme ton menu) en haut de la page (et donc rester visible même si tu descend dans ta page).
(( et donc... être au dessus.. du contenu.. ))
0
guedo Messages postés 77 Date d'inscription mercredi 26 novembre 2014 Statut Membre Dernière intervention 10 avril 2019 1
24 déc. 2014 à 15:38
rebonjour le probleme auquel je suis confronter maintenant c'est que quand je met le bouton sur la page le reste de la page descend en dessous du bouton au lieu de venir en dessous comme ceci (j'aimerais que l'image vienne en desous directement)
est ce que quelqu'un connait une solution sachant que j'ai deja essayé ceci mais sa ne fonctionne pas 

#plan1{
    background-color: #ffffff;
    width: 900px;
    height: 636px;
    margin-left: 325px;
    z-index:0;
	position: absolute;
}
#plan2{
    background-color: #ffffff;
    width: 900px;
    height: 636px;
    margin-left: 325px;
    position: relative;
    z-index:1;
}
0
Webhavo Messages postés 25 Date d'inscription mardi 11 novembre 2014 Statut Membre Dernière intervention 1 décembre 2015 1
25 déc. 2014 à 04:29
Bonjour,

Enlève "position : relative;"

Cordialement
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses