Diminuer la taille de mes sous menu

par **Elie** » 19 juil. 2014, 17:55

Bah met ton menu dans un array et apprend a construire ton menu avec un foreach

$menu =  array(
    'Accueil' => array(),
    'Membres' => array('Connexion', 'Inscription')
    'Images' => array('Photos' => array('Catégorie 1', 'Catégorie 2')),
     'Vidéos' => array('Photos' => array('Catégorie 1', 'Catégorie 2')),
    'Téléchargements' => array()
);

par **HILAL** » 19 juil. 2014, 16:47

Non, ils ne sont pas dans un array, voir lien http://hilalovish.ga2h.com/ et a propos de js, si possible de me donner un tuto parce que j'ai jamais étudie du js..

par **Elie** » 18 juil. 2014, 22:04

Est-ce que les sections de ton menu sont contenus dans un Array ?
On risque de faire comme ca ...

	$menu = array(
			'accueil' => array(),
			'films' => $aStatusFilm,
			'actualités' => array(),
			'contact' => array()
			);
	foreach($menu as $k => $v) {
		$active = !empty($active) ? $active : $page;
		$class = ($active == simplification($k)) ? ' active' : NULL;
echo '     <li class="header'.$class.'"><a href="'.simplification($k).'.html" title="Accédez à la page '.mb_strtolower($k, 'UTF-8').'">'.ucfirst($k).'</a>';
}

par **HILAL** » 18 juil. 2014, 14:34

Bonjour,

pour les sous menu menu c'est bon, c'est réglé mais pour la partie "active" je me connais pas en Ajax, si c'est possible de me donné un tuto ? merci

par **Elie** » 18 juil. 2014, 10:26

Pour les menus :

#menu li ul li a {
	padding: 0px;
}

Pour que ca reste active, je serais toi je prendrais le temps de trouver un menu en jQuery qui propose ca, ca sera plus facile.
Apres il suffit devoir si la page en cours a le meme nom que la page du menu avec

	$pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']);
	$page = basename($pathinfo['basename'], 'php');

Bref ca doit pas etre tres compliqué quoi ...

par **HILAL** » 18 juil. 2014, 05:56

Bonjour,

j'ai deux petit souci d'abord j'aimerai diminuer en hauteur la taille de mes sous menu IMAGE http://hilalovish.ga2h.com/imprimerie.jpg lien vers le site http://hilalovish.ga2h.com/ puis j'aimerai faire en sorte que quand quelqu'un clique sur une page le menu reste selectionné.. j'ai essaye le "active" css mais ca marche pas vu que mes code son séparer..

Ci joint mes codes, merci

page index :

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
	<title>Intellect</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<style>

	</style>
</head>
<body>
<div style="height: 100px; width:100%">
	<?php include("includes/nav2.php"); ?>
</div>
<div style="background-color: #FF5800; height: 52px; width: 100% ; position: fixed">
	<?php include("includes/menu1.php"); ?>
</div>

</body>
</html>

page inclu :

<div class="tal">
	<div style="height: 100%; float: left">
		<div style="padding-top: 12px;">
			<a href="">
				<img alt="Logo" src="images/logo.png"></img>
			</a>
		</div>
	</div>
	<div style="height: 100%; float: right; margin-right: 110px">
		<div class="nav2" style="margin-top: 65px">
			<a href="">
				Contactez nous : 06.60.33.33.33 
			</a>
		</div>
	</div>
</div>

page css :

* {
    margin: 0px;
    padding: 0px;
}
html{
	font-size: 100%;
}
body {
    font-family: "SansaReg","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #4C4C4C;
	margin: 0px;
	padding: 0px;
}
#wrapper {
    margin: 0px;
    padding: 0px;
    width: 100%;
}
div.header {
    width: 100%;
    margin: 0px;
	padding: 15px 0px 20px;
	background-color: #FFF; 
    height: 80px;
}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    line-height: 1;
    font-family: SansaReg;
}
button, input, select, textarea{
    font-size: 100%;
    margin: 0px;
    vertical-align: baseline;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
div.section div.head {
	width: 100%;
	margin: 0px;
	background-color: #DE5711;
	text-align: center;
	font-size: 16px;
	height: 174px;
}
.center {
    text-align: center;
}
form {
    margin: 0px;
    padding: 0px;
}
form.center fieldset {
    text-align: center;
}
fieldset {
    margin: 0px;
    padding: 0px 0px 20px;
    border: 0px none;
}
form.center input, form.center select, form.center textarea {
    margin: 0px auto 5px;
    text-align: center;
}
input[type="text"], input[type="password"] {
    height: 30px;
}
input.auto {
    color: #CCC;
}
input, select, textarea {
    margin: 0px 0px 5px;
    display: block;
    width: 210px;
    padding: 5px 5px 5px 10px;
    border-radius: 5px;
    border: 1px solid #FFF;
    background-color: #DCDCDC;
    font-size: 16px;
    transition: all 0.2s ease 0s;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    font-size: 100%;
    margin: 0px;
    vertical-align: baseline;
}
input[type="submit"], input[type="button"] {
    display: block;
    margin: 0px;
    padding: 10px;
    background-color: #DE5711;
    border-radius: 5px;
    color: #FFF;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
div.content{
	width: 1204px;
	margin: 0px auto;
}
div.header-section {
    width: 200px;
    float: left;
    z-index: 8000;
}
.flexy-menu.vertical{
	width: 200px;
}
.flexy-menu {
    width: 100%;
    margin: 13px 0px 0px;
    padding: 0px;
    position: relative;
    float: left;
    font-family: "SansaReg",sans-serif;
    list-style: none outside none;
}
.flexy-menu.vertical li {
    width: 100%;
}
.flexy-menu li {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    margin-bottom: 10px;
    padding: 0px;
    float: left;
    line-height: 20px;
    position: relative;
}
.flexy-menu.vertical li a {
    display: inline-block !important;
    width: 100%;
    padding: 18px 20px 16px;
    box-sizing: border-box;
}
.flexy-menu > li > a {
    width: auto !important;
    padding: 10px 30px !important;
    color: #FFF;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    background-color: #DE5711;
    border-radius: 5px;
    transition: color 0.2s linear 0s, #000 0.2s linear 0s;
}
.flexy-menu > li :hover{
    width: auto !important;
    padding: 10px 30px !important;
    color: #FFF;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    background-color: red;
    border-radius: 5px;
    transition: color 0.2s linear 0s, #000 0.2s linear 0s;
}
.fieldset {
	border: 2px solid #DE5711;
	border-radius: 5px;
}
div.header div.nav {
    width: 1100px;
    margin: 0px auto;
    padding: 0px;
}
div.header div.nav div.logo {
    float: left;
    margin: 0px;
    padding: 0px;
}
div .logo a{
    color: #DE5711;
    text-decoration: none;
}
div .logo a img {
    border: 0px none;
}
div.header div.nav div.menu {
    float: right;
}
div.header div.nav div.menu ul {
    float: left;
    margin: 38px 0px 0px 50px;
    padding: 0px;
    text-align: left;
    list-style-type: none;
}
div .menu ol, ul {
    list-style: none outside none;
}
div.header div.nav div.menu ul li {
    float: left;
    margin: 0px;
    padding: 0px;
}
div.header div.nav div.menu ul li.signin a {
    color: #FFF;
	text-decoration: nne;
}
div.header div.nav div.menu ul li.signin a {
    transition: all 0.2s ease 0s;
    background-color: #DE5711;
    background-size: auto auto;
    border-radius: 5px;
    color: #FFF;
    cursor: pointer;
	text-decoration: nne;
}
div.header div.nav div.menu ul li a {
    display: block;
    color: #4C4C4C;
    margin: 0px 4px;
    padding: 10px;
	text-decoration: none;
}
div.container {
	box-shadow:  1px 1px 5px #555;
	background-color: #FFF;
	min-height: 400px;
	width: 954px;
    float: right;
	margin-top: 13px;
	margin-bottom: 20px;
	border-radius: 5px;
	margin-right: 20px;
}
div.head h1{
    color: #FFF;
    display: block;
    font-size: 32px;
    font-weight: 200;
    margin: 0px auto 10px;
    padding: 0px;
    text-align: center;
	margin: 15px 0 15px 0;
}
div.head h2 {
	margin: 15px 0 15px 0;
    color: #FFCEB5;
    display: block;
    font-size: 18px;
    font-weight: normal;
    margin: 0px auto 15px;
    padding: 0px;
    text-align: center;
    line-height: 20px;
}
div.mdp {
	padding: 20px 20px;
	width: 560px;
	border-radius: 5px;
	margin-bottom: 12px;
}
div.mdp div.top{	
	font-size: 18px;
	font-family: SansaReg;
	padding: 0px 0px 20px 5px;
	border-bottom: 1px solid #E8E8E8;
	margin-bottom: 20px;
}
div .mdp div.imptdiv{
	padding-top: 10px;
	width: 480px;
	margin-left: auto;
	margin-right: auto;
}
div .mdp div.imptdiv label{
	font-weight: normal;
	font-size: 14px;
}
div .umdp input{
	font-weight: 700px;
	font-size: 14px;
	height: 20px;
	margin-top: 10px;
	padding-left: 10px;
	width: 300px;
	background-color: #F2F2F2;
	font-family: "SansaReg","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif; 
	border: 1px solid #E5E5E5;
}
.clear{
	clear: both;
	font-size: 0px;
	line-height: 0px;
	border: medium none;
	height: 0px;
	width: 0px;
}
div .buttons input{
	background-color: #DE5711; 
	width: 150px;
	height: 32px;
	padding: 0px;
	text-align: center;
	list-style-type: none;
	margin-top: 30px;
	margin-left: 260px;
	font-weight: 700px;
	font-size: 14px;
	font-family: "SansaReg","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif; 
}
#menu, #menu ul /* Liste */     
{
    padding: 0; /* pas de marge intérieure */
    margin: 0; /* ni extérieure */
    list-style: none; /* on supprime le style par défaut de la liste */
    line-height: 21px; /* on définit une hauteur pour chaque élément */
    text-align: center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{	
    font-weight: bold; /* on met le texte en gras */
    font-family: "SansaReg","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif; /* on utilise Arial, c'est plus beau ^^ */
    font-size: 22px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
    display: block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding: 15px; /* aucune marge intérieure */
    background: #FF5800; /* couleur de fond */        
    color: #fff; /* couleur du texte */
    text-decoration: none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width: 244px; /* largeur */
}
#menu li /* Éléments des listes */      
{ 
    float: left; /* pour IE qui ne reconnaît pas "transparent" */
    border-right: 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
    border-right: 1px solid transparent; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{ 
    position: absolute; /* Position absolue */
    width: 244px; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Eléments de sous-listes */
{
    /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
    border-top: 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
    border-top: 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul 
{
    margin: -53px 0 0 274px; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
    /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
    border-left: 1px solid #fff; /* Petite bordure à gauche pour ne pas coller ... */      
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
    border-left: 1px solid transparent; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
    color: #FFF; /* On passe le texte en noir... */
    background: green; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
    left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
    left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug sous IE */
}
div .tal {
	height: 100%;
	width: 1100px;
	margin: auto;
}
div .nav2 a{
	font-family: SansaReg;
	font-size: 22px;
	line-height: 21px;
	color: #4C4C4C;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	font-weight: normal;
}

Diminuer la taille de mes sous menu

Répondre

Étendre la vue Revue du sujet : Diminuer la taille de mes sous menu

Re: Diminuer la taille de mes sous menu

Re: Diminuer la taille de mes sous menu

Re: Diminuer la taille de mes sous menu

Re: Diminuer la taille de mes sous menu

Re: Diminuer la taille de mes sous menu

Diminuer la taille de mes sous menu