Partage
  • Partager sur Facebook
  • Partager sur Twitter

MENU VERTICAL en CSS avec effet d'encadré

    1 septembre 2010 à 4:20:57

    Bonjour

    Je cherche à faire un menu comme celui dans l'image, mais à la verticale. C'est à dire les items de mon menu à la verticale. Je sais faire des menus à la vertical (il suffit de les lister avec un float). Mais le truc c'est que je veux que les items du menu soit accompagné du rectangle qui entoure le contenu même de la page. Comme dans l'image. (Si possible je cherche à faire ça uniquement en css pas de Js) si pas possible, j'irai avec le js. Des idées sur comment débuter?

    Image utilisateur
    • Partager sur Facebook
    • Partager sur Twitter
      1 septembre 2010 à 9:29:40

      début de piste à étudier, il y a surement beaucoup mieux

      tu donnes une classe à la page / onglet actuel (ça je pense que dans tous les cas il faudra le faire)

      ensuite, dans ton css, tu ajoutes des propriétés supplémentaires à cette classe, à toi de voir lesquelles. (changer le background-image + height pour cacher la bordure[solution dégueulasse] / enlever la bordure en bas de Overview, et s'arranger pour qu'elle soit formée par les autres éléments?)
      • Partager sur Facebook
      • Partager sur Twitter
        1 septembre 2010 à 10:50:50

        Tu fait des balise <ul> et <li> et tu ajoute du CSS pour modifier les <ul> et <li> sur le net tu trouvera du CSS deja fait et tu modify
        • Partager sur Facebook
        • Partager sur Twitter
          1 septembre 2010 à 11:06:54

          Regarde là : http://www.districtsolutions.co.uk/candidates/ et inspecte le code ^^
          • Partager sur Facebook
          • Partager sur Twitter
          Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
            1 septembre 2010 à 11:27:56

            Citation : nightmat

            Regarde là : http://www.districtsolutions.co.uk/candidates/ et inspecte le code ^^


            J'ai regardé, effectivement à priori on pourrait croire que c'est une bonne idée, Si on cliques sur "Job seekers" on va sur la page http://www.districtsolutions.co.uk/candidates/
            Et on se rend compte que les images du menu sont dans le répertoire /_images/template/ exemple : /_images/template/tab_candidates_1.gif
            Donc suffit de créer autant de répertoire qu'il y a de sous menu, et de copier autant de fois l'ensemble des images.
            MAIS (il y a un mais), pour un menu avec avec beaucoup d'onglets il faut multiplier les images, du coup à chaque fois que l'on change de page le navigateur doit les charger, par ce qu'elles sont dans des répertoire différents (au moins la première fois) je ne trouve pas ca terrible.
            et 2ème mais : c'est de l'URL rewriting, http://www.districtsolutions.co.uk/candidates/ n'est pas le dossier candidates de http://www.districtsolutions.co.uk/ c'est plutôt districtsolutions.co.uk/index.php?page=candidates (ou quelque chose dans le genre),
            ce qui me fait penser à ca ? l'image districtsolutions.co.uk/candidates/_images/template/tab_candidates_1.gif n'existe pas, mais par contre l'image districtsolutions.co.uk/_images/template/tab_candidates_1.gif existe...

            La seule solution : programmer en php le html qui doit être affiché en fonction de la page.
            • Partager sur Facebook
            • Partager sur Twitter
              1 septembre 2010 à 19:20:09

              Citation

              programmer en php le html qui doit être affiché en fonction de la page.



              Peux-tu clarifier ce point SVP
              • Partager sur Facebook
              • Partager sur Twitter
                1 septembre 2010 à 19:31:19

                bien sure, par exemple :
                <ul>
                <li <?php if($page="accueil.php") echo 'id="page_en_cours"';?>>accueil</li>
                <li <?php if($page="page1.php") echo 'id="page_en_cours"';?>>page1</li>
                <li <?php if($page="page2.php") echo 'id="page_en_cours"';?>>page2</li>
                <li <?php if($page="page3.php") echo 'id="page_en_cours"';?>>page3</li>
                </ul>
                
                • Partager sur Facebook
                • Partager sur Twitter
                  2 septembre 2010 à 5:20:06

                  En fait mon problème n'est pas vraiment de naviguer entre les pages, mais plutôt de faire le design des items sous cette forme en verticale. (de préférence sans image)

                  • Partager sur Facebook
                  • Partager sur Twitter
                    3 septembre 2010 à 17:22:08

                    je précise la question

                    Ce que je cherche à faire c'est le menu simple comme indiqué ci-dessous sauf que je veux les items à la verticale. Avec l'effet de trait qui souligne le menu, sauf que dans ce cas il devra être vertical. Lorsque l'usager clique sur un item, le trait qui souligne la bordure disparait et on sens que l'item appartient au contenu puisque de même couleur, pas de trait séparateur

                    Image utilisateur
                    • Partager sur Facebook
                    • Partager sur Twitter
                      3 septembre 2010 à 17:27:31

                      J'ai bien compris, par contre ce que je ne comprend pas c'est : qu'est ce qui te bloque ? dans le principe il faut suivre le code que j'avais mis avant (avec ul et les li)
                      • Partager sur Facebook
                      • Partager sur Twitter
                        3 septembre 2010 à 17:38:54

                        Merci pour ta réponse.

                        En fait c'est le côté design qui bloque.

                        Je n'est pas l'effet de l'encadré du contenu et de l'item du menu sélectionné.
                        • Partager sur Facebook
                        • Partager sur Twitter
                          3 septembre 2010 à 17:40:53

                          Suffit de le définir dans le css, c'est pour ca que j'ai rajouté <?php if($page="accueil.php") echo 'id="page_en_cours"';?> pour pouvoir différencier le menu correspondant à la page actuelle et lui donné un aspect différent
                          • Partager sur Facebook
                          • Partager sur Twitter
                            3 septembre 2010 à 17:46:00

                            lol Mais le problème justement c'est de pouvoir faire cet effet en CSS.
                            • Partager sur Facebook
                            • Partager sur Twitter
                              3 septembre 2010 à 17:47:18

                              il n'y a rien de compliqué, quelques ligne de border:...; et c'est tout ;)
                              • Partager sur Facebook
                              • Partager sur Twitter
                                3 septembre 2010 à 17:47:18

                                Le message qui suit est une réponse automatique activée par un modérateur.
                                Les réponses automatiques permettent d'éviter aux modérateurs d'avoir à répéter de nombreuses fois la même chose, et donc de leur faire gagner beaucoup de temps.
                                Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter le modérateur en question par MP.


                                Veuillez modifier le titre du sujet


                                Bonjour,

                                Ce sujet a un titre qui ne décrit pas correctement le sujet, ou il est écrit en majuscules.

                                La présentation de votre message étant néanmoins correcte, nous ne fermons pas le sujet, mais vous êtes invité(e) à modifier son titre en éditant votre premier message.

                                Cette modification doit être faite dans les plus brefs délais, sans quoi nous serons dans l’obligation de clore le sujet .


                                Voici quelques correspondances pour vous aider à choisir au mieux votre titre :




                                Comment fait-on pour éditer un titre ?

                                Si vous êtes l'auteur du topic, vous pourrez uniquement le changer en éditant le premier post du topic à l'aide de l'icône Image utilisateur.



                                Merci de votre compréhension :)
                                Les modérateurs.
                                • Partager sur Facebook
                                • Partager sur Twitter
                                Pwaite.net > Transfert de crédit téléphonique et monétisation de site web                                                                                        « I am awesome »
                                  3 septembre 2010 à 18:37:22

                                  essayes ceci :

                                  #menu li {
                                  	background-color:#99CCFF;
                                  	border-color:#6699FF;
                                  	border:1px solid;
                                  	width:30px;
                                  	height:150px;
                                  	color:#006699;
                                  	font-family:Arial, Helvetica, sans-serif;
                                  	font-size:12px;
                                  	font-weight:bold;
                                  	}	
                                  	
                                  #menu li a {
                                  	background-color:#99CCFF;
                                  	border-color:#6699FF;
                                  	border:1px solid;
                                  	width:30px;
                                  	height:150px;
                                  	color:#006699;
                                  	font-family:Arial, Helvetica, sans-serif;
                                  	font-size:12px;
                                  	font-weight:bold;
                                  	}	
                                  	
                                  #menu li a:hover {
                                  	background-color:#CCCCFF;
                                  	border-color:#6699FF;
                                  	border:1px solid;
                                  	width:30px;
                                  	height:150px;
                                  	color:#003366;
                                  	font-family:Arial, Helvetica, sans-serif;
                                  	font-size:12px;
                                  	font-weight:bolder;
                                  	}
                                  


                                  ensuite tu créés ta div menu et à l'intérieur tu fais ton <ul><li> </li></ul> ;)
                                  • Partager sur Facebook
                                  • Partager sur Twitter

                                  Mon portfolio /  Le CSS ça peut craindre -->Conférence CSS3.CREATE

                                  MENU VERTICAL en CSS avec effet d'encadré

                                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                  • Editeur
                                  • Markdown