Menu mobile

Fermé
Eley Messages postés 185 Date d'inscription mardi 23 octobre 2007 Statut Membre Dernière intervention 24 juillet 2010 - 4 août 2008 à 02:51
 ,titouan - 23 janv. 2010 à 18:13
bonsoir tout le monde , voilà je debute en css et xhtml je souhaiterais rendre mon menu mobile voici mon code
merci pour vos réponses

* {

	margin: 0;

	padding: 0;

}



a {color: #682;}



a:hover {color: #9A6;}



body {

	background: #333 url(img/bg.gif);

	color: #333;

	font: normal 62.5% "Lucida Sans Unicode",sans-serif;

	margin: 3% 0;

}



p,ul {

	padding-bottom: 1em;

}



ul {margin-left: 1.2em;}



li {list-style: none;}

.main li {list-style-image: url(img/li.gif);}



h1 {font-size: 1.2em;}



blockquote {

	background: #FFF;

	border-bottom: 1px solid #EEE;

	border-top: 1px solid #EEE;

	color: #333;

	display: block;

	font-size: 0.9em;

	margin-bottom: 1.2em;

	padding: 6px 12px;
        



}

blockquote p {padding: 3px 0;font-weight: bold;}




h1,h2,h3 {color: #C0C0C0;}



/* misc */

.clearer {clear: both;}

.main_right .padded {padding: 6px 2px 6px 16px;}

.main .padded {padding: 18px 24px;}

.meta {font-size: 0.8em; color: #666;}

.left {float: left;}

.right {float: right;}



/* structure */

.container {

	font-size: 1.2em;

	background: url(img/bgcontainer.gif) repeat-y;

	margin: 0 auto;

	width: 840px;

	border: 12px solid #222;
        color: #C0C0C0;
        

}



/* header */

.header {

	float: left;

	width: 875px;

	background: url(img/header.jpg) no-repeat;

	font: normal 2.4em Verdana,sans-serif;

	line-height: 150px;

	text-align: center;	

}



/* structure */

.top {

	background: #222;

	color: #DDD;

	float: left;

	font: normal 1.4em Verdana;

	height: 50px;

	text-align: center;

	width: 639px;

}

.subnav {

	float: left;

	width: 160px;

}

.main {

	float: left;

	width: 480px;

}

.main_right {

	float: right;

	width: 200px;

	color: #CCC;

}



/* sub-navigation */

.subnav h1 {

background: url(img/subnav.jpg) no-repeat;

	

	

	line-height: 44px;

	padding-left: 8px;
        width: 160px
        font-family: Verdana, sans-serif;
        text-align: center;

}




.subnav ul {margin: 0; padding: 0;}

.subnav li {

	border-bottom: 1px solid #696755;

	list-style: none;

}

.subnav li a {

	background: #89866F;	

	color: #111;

	display: block;

	padding: 8px 0 8px 12px;

	width: 148px;

	text-decoration: none;

}

.subnav li a:hover {

	background: #9C997C;

	color: #000;

}



/* footer */

.footer {

	background: url(img/bgfooter.gif) repeat-x;

	color: #CCC;

	font-size: 0.9em;

	line-height: 39px;

	width: 100%;

	text-align: center;

}

.footer .left,.footer .right {padding: 0 16px;}

.footer a {color: #EEE;}

.footer a:hover {color: #FAFCB0;}





Cordialement
A voir également:

5 réponses

gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
4 août 2008 à 10:26
Salut, si tu veux le rendre mobile dans le genre drag'n drop (mouveable sur la page via la souris), voici comment faire :

Télécharger ces 4 bibliothèques javascript (téléchargeable ici ==> http://script.aculo.us/downloads

- scriptaculous.js
- effects.js
- prototype.js
- dragdrop.js

Il y en a plus dan cette archive mais on a besoin que de ses 4 là.

Donc mets les dans le même dossier que ta page html ou php.

On doit en appeller 2 sur les 4

<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
</head>

ATTENTION: L'ordre de l'appelle des 2 bibliothèques est important, si on appelle scriptaculous.js avant prototype.js, ça ne marchera pas ...

Ensuite, ton menu doit etre dans un conteneur (div, span, p, ...) et ce conteneur doit avoir un id

exemple:

<div id="menu">
MON MENU<br /><br />
sous_menu ...
</div>

Ensuite, il te reste plus qu'a dire que ce menu va être bougeable !
Donc voici le dernier code a insérer à la suite:

<script type="text/javascript">
new Draggable('id_du_menu');
</script>

VOILA ! MAGIEEE ^^

Bon, si tu as pas bien compris, voici un exemple récapitulatif:

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
</head>

<body>
<div id="menu" style="background-color: red; cursor: pointer">
MENU <br /><br />
- Option 1 <br />
- Option 2 <br />
....<br />
</div>
<script type="text/javascript">
new Draggable('menu');
</script>
</body>
</html>

J'ai mis un fond rouge pour bien voir qu'il est bougeable ^^

En espérant t'avoir aider ;)

A+

Gaerebut
0
Eley Messages postés 185 Date d'inscription mardi 23 octobre 2007 Statut Membre Dernière intervention 24 juillet 2010
6 août 2008 à 04:34
Merci beaucoup Gaerebut , je testerais ça je te dirais si ça fonctionne , seulement vois tu je souhaiterais également supprimer le menu de droite et je ne sais pas trop quoi toucher dans le css à part main right
0
Et si on veut que tous les menus soit comme ça? NE peut-on pas les intégrer dans la page externe en CSS? Pour simplifier?
-1
Euh, j'ai oublié de demandé où doit on téléchargé les bibliothèque sur le lien? Et est-ce que sa fonctionne sur Mac?
Merci
-1
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
22 janv. 2010 à 04:11
On télécharge sur les liens du milieux ... rien de plus simple !
Est-ce que sur un mac tu peux aller sur internet comme sur windows ??? (Tu as la réponse à ta seconde question :-) )

A+

Gaerebut
-1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Merci
-1