Sujet Précédent Sujet Suivant

Comment insérer un menu dans mes données

Résolu/Fermé
cochon-tirelire Messages postés 3 Date d'inscription samedi 2 juillet 2016 Statut Membre Dernière intervention 4 juillet 2016 - 2 juil. 2016 à 07:31
cochon-tirelire Messages postés 3 Date d'inscription samedi 2 juillet 2016 Statut Membre Dernière intervention 4 juillet 2016 - 4 juil. 2016 à 03:25
Bonjour à tous!

Voilà, je suis en train de construire un site web et je suis débutante dans le css, html et php. Je travail à partir de wordpress mais aucun menu me plaisait alors j'ai acheté un créateur de menu qui me donne les fichiers (images, index, script, style).

Le hic c'est que je ne sais absolument pas où copier ces données. J'ai jouer un peu dans mon cpanel dans le dossier header.php mais ça semble pas être correcte car je vois toujours mon ancien header et mon nouveau est décomposé en html. Vous pouvez aller voir l'allure du menu sur www.cochon-tirelire.com. J'aimerais donc savoir comment disposer de ces données. Merci de votre aide.

Voilà mes données:

INDEX:
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MenuMaker</title>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="cssmenu">
<ul>
<li><a href="www.cochon-tirelire.com" target="_blank">Page d'acceuil</a></li>
<li><a href="www.cochon-tirelire.com/votreprofil/" target="_blank">Votre profil</a></li>
<li><a href="www.cochon-tirelire.com/collectivité/">Collectivité</a></li>
<li class="active"><a href="www.cochon-tirelire.com/formulairedecontact" target="_blank">Contact</a></li>
</ul>
</div>

</body>
</html>

SCRIPT:

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});

$("#cssmenu a").each(function() {
var linkTitle = $(this).text();
$(this).attr('data-title', linkTitle);
});

});
})(jQuery);

STYLE:
@import url(https://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu > ul {
background: #82d8b0;
}
#cssmenu > ul > li {
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 20px;
font-size: 18px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #82d8b0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
color: #444444;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #444444;
-webkit-transform: rotateX(90deg) translateY(-25px);
-moz-transform: rotateX(90deg) translateY(-25px);
transform: rotateX(90deg) translateY(-25px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #444444;
background: #3aba7e;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -14px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #82d8b0;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #444444;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 18px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #82d8b0;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 20px;
top: 19px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #444444;
border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 20px;
top: 29px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #444444;
}

ET IMAGES : contient 3 images
A voir également:

2 réponses

Réponse 1 / 2
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
Modifié par elgazar le 2/07/2016 à 15:46
bonjour

pour ce qui est du menu, c'est selon le thème utilisé puisque tu peux avoir des menus n'importe tout sur la page.

si tu parles du menu vertical sur le coté du site, c'est dans le fichier sidebar.php de ton thème qu'il faut insérer le code jusye apr-s la ligne div id secondary, il sera alors au dessus de la barre de recherche a droite sur ton site.

si tu veux mettre un menu au dessus du contenu (comme tu l'a fait avec le fichier header.php) , il vaut mieux mettre un menu horizontal

Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
Modifié par elgazar le 2/07/2016 à 15:52
cela dit, c'est un menu que tu peux insérer directement dans un widget texte 
<div id="cssmenu"> 
<ul> 
<li><a href="www.cochon-tirelire.com" target="_blank">Page d'acceuil</a></li> 
<li><a href="www.cochon-tirelire.com/votreprofil/" target="_blank">Votre profil</a></li> 
<li><a href="www.cochon-tirelire.com/collectivité/">Collectivité</a></li> 
<li class="active"><a href="www.cochon-tirelire.com/formulairedecontact" target="_blank">Contact</a></li> 
</ul> 
</div>

ouvre le fichier header.php de ton thème et colle-les lignes concernant les scripts javascript avant /head et ajoute le code css au fichier style.css de ton thème.


dans l'idéal, il vaut mieux faire un thème enfant plutôt que de modifier le thème original sinon tu risques de perdre toutes les modifications lors de la mise à jour du thème
0
cochon-tirelire Messages postés 3 Date d'inscription samedi 2 juillet 2016 Statut Membre Dernière intervention 4 juillet 2016 > elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021
3 juil. 2016 à 07:15
Merci beaucoup pour votre réponse rapide elgazar!

J'ai appliqué vos conseils et le menu est apparut! La seule chose, c'est que les sous-menu ne fonctionnent pas et que mes links donnent toujours ex. www.cochon-tirelire.com/profil/www.cochon-tirelire.com (en double) alors que le link que je veux est simplement www.cochon-tirelire.com/profil.

Une autre chose, lorsque je met le script avant /head ou après dans header.php il s'affiche toujours en texte sur ma page.

J'attends votre réponse! Merci!
0
Réponse 2 / 2
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
Modifié par elgazar le 3/07/2016 à 09:32
c'est parce que tu as copié la totalité du code alors qu'il ne faut en mettre qu'une partie comme expliqué dans mon second post ( que tu le mettes dans un widget ou directement dans le code du fichier, c'est pareil) du coup tu te retrouves avec des balises en double un peu partout
mets seulement à la fin du fichier index.php 
<div id="cssmenu"> 
<ul> 
<li><a href="www.cochon-tirelire.com" target="_blank">Page d'acceuil</a></li> 
<li><a href="www.cochon-tirelire.com/votreprofil/" target="_blank">Votre profil</a></li> 
<li><a href="www.cochon-tirelire.com/collectivité/">Collectivité</a></li> 
<li class="active"><a href="www.cochon-tirelire.com/formulairedecontact" target="_blank">Contact</a></li> 
</ul> 
</div>


puis ensuite ajoute avant la balise /head du fichier index.php les liens vers les javascript existants .

le code javascript que tu donnes dans ton premier post (sous script) est intégré dans le code html ou dans un fichier .js ?

Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
0
cochon-tirelire Messages postés 3 Date d'inscription samedi 2 juillet 2016 Statut Membre Dernière intervention 4 juillet 2016
4 juil. 2016 à 03:25
Rebonjour!

J'ai réussi à faire tout fonctionner! C'état du à un erreur de téléchargement sur l'éditeur de menu en ligne. Quand je téléchargeais j'obtenais:
<div id="cssmenu">
<ul>
<li><a href="www.cochon-tirelire.com" target="_blank">Page d'acceuil</a></li>
<li><a href="www.cochon-tirelire.com/votreprofil/" target="_blank">Votre profil</a></li>
<li><a href="www.cochon-tirelire.com/collectivité/">Collectivité</a></li>
<li class="active"><a href="www.cochon-tirelire.com/formulairedecontact" target="_blank">Contact</a></li>
</ul>
</div>

Mais en fait c'est le lien que j'ai juste copier directement sur l'éditeur qui est:

<div id="cssmenu">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Page d'acceuil</a></li>
<li><a href="#"><i class="fa fa-fw fa-bars"></i> Votre profil</a>
<ul>
<li><a href="/membre/''''/reglages" target="_blank">Réglages de votre compte</a></li>
<li><a href="/membres/''''/messages/" target="_blank">Messages</a></li>
<li><a href="/membres/''''/notifications/">Notifications</a></li>
<li><a href="/membres/''''/friends/">Amis</a></li>
</ul>
</li>
<li><a href="#">Collectivité</a>
<ul>
<li><a href="/membres/''''/groups/" target="_blank"><i class="fa fa-fw fa-cog"></i> Groupes</a></li>
<li><a href="/membre/''''/activités/" target="_blank">Activités</a></li>
</ul>
</li>
<li><a href="/formulairedecontact/"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
</ul>
</div>

qui fonctionne très bien! Je vois mes sous-menus et juste un lien url! Merci pour votre patience!
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Impossible d'activer partage Connexion Internet données mobiles
AaronX -
alex21usa -

17 réponses