Tutoriaux Graphiques : iDiot et 29 utilisateurs inconnus

 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

Menu pour web design

 
n°81339
Quidam
Photoshop - User
Profil : Big Penguin
Avatar
profil
Posté le 21-10-2009 à 22:27:32  
 

Bonjour,  
Alors je coince au niveau du menu dans mon web design, je ne sais pas quoi mettre et en même temps je voudrais un effet d'hover ou rollover pour mon menu sachant qu'il sera dans la partie blanche :he: . Si quelqu'un pourrait me faire un menu, ça serait super synpas de sa part !  :wink2:  
 
Voici le contenu du menu : Accueil - Tutorial - Galerie - Contact
 
Et voici mon web design :  
 
http://img142.imageshack.us/img142/7373/accueilx.png


Message édité par Quidam le 27-10-2009 à 19:18:57
answer
mood
GoogleAds
profil
Posté le 21-10-2009 à 22:27:32  
 

answer
n°81429
mlbcreation
Profil : New Penguin
Avatar
profil
Posté le 25-10-2009 à 13:39:09  
 

Qu'appelle tu "effet de roll over" ?


---------------
http://i83.servimg.com/u/f83/11/83/77/89/signn10.png
answer
n°81432
Quidam
Photoshop - User
Profil : Big Penguin
Avatar
profil
Posté le 25-10-2009 à 13:53:26  
 

C'est quand on pointe le curseur sur une catégorie et sa fait un petit effet voici un exemple :
http://img340.imageshack.us/img340/7370/552menuapple.jpg

answer
n°81498
Quidam
Photoshop - User
Profil : Big Penguin
Avatar
profil
Posté le 27-10-2009 à 19:20:07  
 

Up ! :up:

answer
n°81545
Quidam
Photoshop - User
Profil : Big Penguin
Avatar
profil
Posté le 29-10-2009 à 20:19:48  
 

Re Up ! :up:

answer
n°81573
Quidam
Photoshop - User
Profil : Big Penguin
Avatar
profil
Posté le 31-10-2009 à 16:15:33  
 

Uuuuup !

answer
n°81576
Crousty
Profil : Penguin
Avatar
profil
Posté le 31-10-2009 à 17:34:46  
 

Et si ta solution s'appelait Google ? Des fois il suffit de faire une p'tite recherche, et on tombe sur tout un tas de réponses. Elle sont pas toutes pertinentes, mais elles ne sont pas non plus toutes idiotes...
En tout cas d'après ce que j'ai cru comprendre, pour faire ton menu roll over, il faudra soit le faire en Flash soit en Javascript...
Ya même toute une série de logiciels libres pour ne pas taper dans le portemonnaie! :wink2:

 

:jap:  


Message édité par Crousty le 31-10-2009 à 18:04:15
answer
n°81578
mlbcreation
Profil : New Penguin
Avatar
profil
Posté le 31-10-2009 à 21:25:40  
 

Tu peux meme ne le faire qu'en CSS avec une seule image !


---------------
http://i83.servimg.com/u/f83/11/83/77/89/signn10.png
answer
n°81579
Quidam
Photoshop - User
Profil : Big Penguin
Avatar
profil
Posté le 31-10-2009 à 21:47:19  
 

J'ai déjà essayé des tutos mais ça n'a pas le même style que mon design !

answer
n°81776
mlbcreation
Profil : New Penguin
Avatar
profil
Posté le 06-11-2009 à 22:19:48  
 

http://i83.servimg.com/u/f83/11/83/77/89/previe10.png
 
Image :  

Code :
  1. http://i83.servimg.com/u/f83/11/83/77/89/menu11.png


 
Code :
Index.htm

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html id="min-width" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  3. <head>
  4. <title>Menu</title>
  5. <link rel="stylesheet" href="style.css" type="text/css" />
  6. </head>
  7. <body>
  8. <div id="menu">
  9. <div class="top">
  10. <div class="left"></div>
  11. <div class="right"></div>
  12. </div>
  13. <div class="menu-bg">
  14. <ul>
  15. <li><a>Accueil</a></li>
  16. <li><a>Gallerie</a></li>
  17. <li><a>...</a></li>
  18. </ul>
  19. </div>
  20. </div>
  21. </body>
  22. </html>


 
style.css

Code :
  1. /* Layout Menu */
  2. * {padding:0;margin:0;font-size:100%;}
  3. #menu{height:48px;width:670px;margin:0 auto;}
  4. .top{height:8px;width:654px;background:url(menu.png) 0 -10px repeat-x;position:relative;margin:0 auto;}
  5. .top div {position:absolute;height:8px;width:8px;}
  6. .top .left {background:url(menu.png) 0 0;left:-8px;}
  7. .top .right {background:url(menu.png) -8px 0;right:-8px;}
  8. .menu-bg {height:39px;background:url(menu.png) 0 -20px repeat-x;width:670px;}
  9. #menu ul {height:39px;list-style-type:none;line-height:39px;}
  10. #menu ul li{height:27px;float:left;padding:0 20px;background:url(menu.png) right -60px no-repeat;line-height:27px;}
  11. /* Typography */
  12. #menu ul li a{text-transform:uppercase;height:27px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;color:white;text-shadow:-1px -1px #393037;}
  13. #menu ul li a:hover{color:#ffe400;}


---------------
http://i83.servimg.com/u/f83/11/83/77/89/signn10.png
answer
n°81784
Quidam
Photoshop - User
Profil : Big Penguin
Avatar
profil
Posté le 07-11-2009 à 00:05:56  
 

Merci beaucoup !

answer
n°81786
mlbcreation
Profil : New Penguin
Avatar
profil
Posté le 07-11-2009 à 09:40:36  
 

De rien (:
Et si tu souhaite changer la couleur du menu, prend l'image 'menu.png' et fais dans Photoshop :  
Image > Reglages > Teinte - Saturation > Et modifie la teinte


---------------
http://i83.servimg.com/u/f83/11/83/77/89/signn10.png
answer

Aller à :
Ajouter une réponse