Problème pour générer un menu complexe avec php mysql
glodybiss
Messages postés
509
Statut
Membre
-
glodybiss Messages postés 509 Statut Membre -
glodybiss Messages postés 509 Statut Membre -
Bonjour,
Je suis en train de travailler sur un projet dont je suis moi même l'initiateur, depuis le début j'essaie d'évoluer tout doucement jusqu'à attaindre mon objectif, mais je suis bloqué juste un peu à un niveau et je veux votre assistance. Ce que je veux faire c'est recuperer à partir de ma base des données un menu qui contiendra un sous menu, mais ce sous menu sera en faite un contenaire de news selon la catégorie du menu sur lequel on se trouve! Vous pouvez voir ici ce que je veux faire : www.infoplusmagazine.com/temp
Quand vous êtes sur actualité, on posant la souris sur actualité vous avez les news selon la catégorie du menu actualité, mais aussi une news à la une et ainsi de suite pour les autres menu... En réalité afficher un menu simple je pourrais bien, mais là je trouve que c'est trop complexe et si quelqu'un peut m'aider à raisonner dans ce sens je lui serai très reconnaissant.
Voici à peu près la feuille de style comment il se présente sur le lien que j'ai mensionné au dessus vous pouvez déjà voir ce que j'ai fait en html et feuille des styles.
Merci de votre aide ou orientation.
Je suis en train de travailler sur un projet dont je suis moi même l'initiateur, depuis le début j'essaie d'évoluer tout doucement jusqu'à attaindre mon objectif, mais je suis bloqué juste un peu à un niveau et je veux votre assistance. Ce que je veux faire c'est recuperer à partir de ma base des données un menu qui contiendra un sous menu, mais ce sous menu sera en faite un contenaire de news selon la catégorie du menu sur lequel on se trouve! Vous pouvez voir ici ce que je veux faire : www.infoplusmagazine.com/temp
Quand vous êtes sur actualité, on posant la souris sur actualité vous avez les news selon la catégorie du menu actualité, mais aussi une news à la une et ainsi de suite pour les autres menu... En réalité afficher un menu simple je pourrais bien, mais là je trouve que c'est trop complexe et si quelqu'un peut m'aider à raisonner dans ce sens je lui serai très reconnaissant.
Voici à peu près la feuille de style comment il se présente sur le lien que j'ai mensionné au dessus vous pouvez déjà voir ce que j'ai fait en html et feuille des styles.
Merci de votre aide ou orientation.
A voir également:
- Problème pour générer un menu complexe avec php mysql
- Menu déroulant excel - Guide
- Comment générer un qr code - Guide
- Generer mot de passe - Télécharger - Sécurité
- Easy php - Télécharger - Divers Web & Internet
- Canon quick menu - Télécharger - Utilitaires
5 réponses
Tu souhaites tout développer en PHP? Je te conseillerai de regarder du côté de jquery si tu souhaite un affichage un peu dynamique, ils ont simplifiés pas mal de chose au travers de jquery ui pour faire des menus déroulant et autres, les puristes n'aimeront pas forcément!
J'ai juste d'un coup de pousse! je ne développe pas seulement avec php mais aussi avec jquery, je veux juste un petit coup de pousse pour que je continue avec le reste.
J'ai juste besoin d'un coup de pousse! je ne développe pas seulement avec php mais aussi avec jquery, je veux juste un petit coup de pousse pour que je continue avec le reste.
Il ya encore beaucoup de travail si tu veux arriver au menu de site que tu nous a mis en lien mais si ça peut t'aider j'ai un menu déroulant dans lequel tu peux afficher différents éléments les un à coté des autres. L'idée est de mettre un tableau dans le menu <ul> qui représente le sous menus d'une catégorie. Tu pourras mettre une grande image sur la gauche et différents liens sur la droite. Pour avoir un rendu agréable il y aura pas mal de css à mettre en place.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="jMenu.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$("#menu").jMenu({
openClick : false,
ulWidth : 'auto',
effects : {
effectSpeedOpen : 200,
effectSpeedClose : 200,
effectTypeOpen : 'slide',
effectTypeClose : 'hide',
effectOpen : 'linear',
effectClose : 'linear'
},
TimeBeforeOpening : 100,
TimeBeforeClosing : 100,
animatedText : false,
paddingLeft: 1
});
});
</script>
<style>
#menu {
display: table;
margin: 0;
padding: 0;
}
#menu li {
background-color: #322F32;
display: table-cell;
margin: 0;
}
#menu li a {
background-color: transparent;
color: #FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
}
#menu li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
}
#menu li ul li {
background-color: #322F32;
border-bottom: 1px solid #484548;
display: block;
padding: 0;
}
#menu li ul li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: block;
font-size: 11px;
padding: 7px;
text-transform: none;
}
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Addyston</a></li>
<li>
<a href="#">Delphi</a>
<ul><table>
<td>
<li class="ui-state-disabled"><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</td>
<td>
<li><a href="#">akuighzadgf</a></li>
<li><a href="#">confucius</a></li>
</td>
</table>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li>
<a href="#">Salzburg</a>
<ul>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Perch</a></li>
</ul>
</li>
</body>
</html>
Tu peux récupérer jMenu.js à cette adresse :
https://github.com/alpixel/jMenu/blob/master/js/jMenu.jquery.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="jMenu.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$("#menu").jMenu({
openClick : false,
ulWidth : 'auto',
effects : {
effectSpeedOpen : 200,
effectSpeedClose : 200,
effectTypeOpen : 'slide',
effectTypeClose : 'hide',
effectOpen : 'linear',
effectClose : 'linear'
},
TimeBeforeOpening : 100,
TimeBeforeClosing : 100,
animatedText : false,
paddingLeft: 1
});
});
</script>
<style>
#menu {
display: table;
margin: 0;
padding: 0;
}
#menu li {
background-color: #322F32;
display: table-cell;
margin: 0;
}
#menu li a {
background-color: transparent;
color: #FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
}
#menu li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
}
#menu li ul li {
background-color: #322F32;
border-bottom: 1px solid #484548;
display: block;
padding: 0;
}
#menu li ul li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: block;
font-size: 11px;
padding: 7px;
text-transform: none;
}
.ui-menu { width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Addyston</a></li>
<li>
<a href="#">Delphi</a>
<ul><table>
<td>
<li class="ui-state-disabled"><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</td>
<td>
<li><a href="#">akuighzadgf</a></li>
<li><a href="#">confucius</a></li>
</td>
</table>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li>
<a href="#">Salzburg</a>
<ul>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Perch</a></li>
</ul>
</li>
</body>
</html>
Tu peux récupérer jMenu.js à cette adresse :
https://github.com/alpixel/jMenu/blob/master/js/jMenu.jquery.js
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question