Crée un site web
Résolu/Fermé
faridtounsi
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Statut
Membre
Dernière intervention
30 novembre 2018
-
Modifié le 27 oct. 2018 à 20:57
DrissaCISSOUMA - 1 juil. 2019 à 01:15
DrissaCISSOUMA - 1 juil. 2019 à 01:15
A voir également:
- Crée un site web
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Creer un site web - Guide
- Web office - Guide
- Cree un compte google - Guide
6 réponses
jordane45
Messages postés
38424
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2025
4 734
19 oct. 2018 à 19:19
19 oct. 2018 à 19:19
Bonjour,
Aucune aide ne pourra t'être apportée si :
- Tu ne montres pas le code qui te pose problème
- Tu n'indiques pas à partir de quoi tu créés ton site ( un cms comme wordpress ? joomla ? tout codé à la main ?? )
- Et surtout...que tu n'expliques pas exactement le souci rencontré.
Puis-je compté sur votre aide pour m'assister dans cette tâche, je rencontre principalement des problèmes pour crée le menu hamburger.
Aucune aide ne pourra t'être apportée si :
- Tu ne montres pas le code qui te pose problème
- Tu n'indiques pas à partir de quoi tu créés ton site ( un cms comme wordpress ? joomla ? tout codé à la main ?? )
- Et surtout...que tu n'expliques pas exactement le souci rencontré.
faridtounsi
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Statut
Membre
Dernière intervention
30 novembre 2018
22 oct. 2018 à 16:57
22 oct. 2018 à 16:57
bonjour, après d'âpres recherches j'ai fini par trouver une menu similaire à celui que je veux, je rencontre néanmoins quelques difficultés pour l'intégration à mon propre code, ja'i réussi en partie mais il subsiste quelques bug notamment au niveau de l'affichage du menu, je m'explique, je voudrais que le menu disparaisse lorsque je clique sur une section et qu'il m'envoie dessus.
ci-joint mon code:
code css:
code JS:
et code JS:
ci-joint mon code:
<!DOCTYPE html>
<html>
<head>
<title>CV Homer</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu en pleine page avec animations - script html CSS gratuit : Outils-web.com</title>
<meta name="description" content="Le menu vient recouvrir l'intégralité de la page avec différentes animations en fondu, zoom etc…" />
<meta name="Robots" content="all"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" /><!-- effet ici -->
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<section>
<p><button id="trigger-overlay" type="button">Ouvrir le menu</button></p>
</section>
</div>
<div class="overlay overlay-slidedown"><!-- effet ici -->
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a href="#section1">section1</a></li>
<li><a href="#section2">section2</a></li>
<li><a href="#section3">section3</a></li>
</ul>
</nav>
</div>
<script src="js/classie.js"></script>
<script src="js/demo1.js"></script>
<section id="about" class="container-fluid">
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</section>
<section id="section1">
<div class="black-divider"></div>
<div class="heading">
<h2>SECTION 1</h2>
</div>
</br></br></br></br></br></br></br></br></br></br>
<div class="row text-center">
<div class="col-md-4">
<h4 class="service-heading">BLABLABLA</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">BLOBLOBLO</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">BLIBLIBLI</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</section>
<section id="section2">
<div class="black-divider"></div>
<div class="heading">
<h2>SECTION 2</h2>
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</br></br></br>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</section>
<section id="section3">
<div class="container">
<div class="black-divider"></div>
<div class="heading">
<h2>SECTION 3</h2>
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</br></br></br>
</div>
</section>
<footer class="text-center">
<a href="#about">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<h5>CopYright bY Me 2018</h5>
</footer>
</body>
</html>
code css:
/* Overlay style */
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black; /* Couleur menu */
}
/* Overlay closing cross */
.overlay .overlay-close {
width: 80px;
height: 80px;
position: absolute;
right: 20px;
top: 20px;
overflow: hidden;
border: none;
background: url(../img/cross.png) no-repeat center center;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}
/* Menu style */
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
text-decoration: none;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: grey; /* couleur hover */
}
/* Effects */
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
@media screen and (max-height: 30.5em) {
.overlay nav {
height: 70%;
font-size: 34px;
}
.overlay ul li {
min-height: 34px;
}
}
code JS:
(function() {
var triggerBttn = document.getElementById( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'button.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName !== 'visibility' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
classie.remove( overlay, 'close' );
};
if( support.transitions ) {
overlay.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
else if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
}
}
triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );
})();
et code JS:
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
faridtounsi
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Statut
Membre
Dernière intervention
30 novembre 2018
26 oct. 2018 à 13:12
26 oct. 2018 à 13:12
up !!!
bg62
Messages postés
23682
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
14 février 2025
2 396
27 oct. 2018 à 20:59
27 oct. 2018 à 20:59
le 'up' ne sert à rien, si quelqu'un veut essayer de t'aider ... il arrivera :)
lemilemm
Messages postés
6
Date d'inscription
jeudi 29 novembre 2018
Statut
Membre
Dernière intervention
29 novembre 2018
1
29 nov. 2018 à 21:32
29 nov. 2018 à 21:32
Bonjour,
Si tu n'est pas trop à l'aise avec les codes. Tu peux toujours créer ton site à partir de Wordpress avec des thèmes payant comme DIVI. Qui vont te permettre de faire à peu prêt n'importe quoi!
Alex
Si tu n'est pas trop à l'aise avec les codes. Tu peux toujours créer ton site à partir de Wordpress avec des thèmes payant comme DIVI. Qui vont te permettre de faire à peu prêt n'importe quoi!
Alex
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
faridtounsi
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Statut
Membre
Dernière intervention
30 novembre 2018
30 nov. 2018 à 12:28
30 nov. 2018 à 12:28
le problème est résolue !!!!!!
20 oct. 2018 à 18:12
voici mon code
ma page index:
<!DOCTYPE html> <html> <head> <title>CV Homer</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script> </head> <body data-spy="scroll" data-target=".navbar" data-offset="60"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> </div> </div> </nav> <section id="about" class="container-fluid"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </section> <section id="section1"> <div class="black-divider"></div> <div class="heading"> <h2>SECTION 1</h2> </div> </br></br></br></br></br></br></br></br></br></br> <div class="row text-center"> <div class="col-md-4"> <h4 class="service-heading">BLABLABLA</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fas fa-circle fa-stack-2x text-primary"></i> <i class="fas fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">BLOBLOBLO</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fas fa-circle fa-stack-2x text-primary"></i> <i class="fas fa-lock fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">BLIBLIBLI</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> </div> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </section> <section id="section2"> <div class="black-divider"></div> <div class="heading"> <h2>SECTION 2</h2> </div> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </br></br></br> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </section> <section id="section3"> <div class="container"> <div class="black-divider"></div> <div class="heading"> <h2>SECTION 3</h2> </div> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </br></br></br> </div> </section> <footer class="text-center"> <a href="#about"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <h5>CopYright bY Me 2018</h5> </footer> </body> </html>20 oct. 2018 à 23:02
pour l'animation vous pouvez faire ça en JavaScript, ou même JQuery(ce qui revient au même mais est plus simple à écrire).
Sinon il y a aussi CSS 3.
Quel est votre soucis exactement?
Personnellement je ne voit pas l'intérêt de faire un site en copiant un autre à part pour se faire la main.
Modifié le 21 oct. 2018 à 09:16
Regardes le code source du site que tu veux "reproduire".
Tu devrais y trouver tout ce qui t'interesse...
Côté HTML
<div class="container"> <div id="nav-icon" class="light"> <span></span> <span></span> <span></span> <span></span> </div> <div id="menu-overlay"> <ul id="menu" class="menu-click scroll v-align-html"> <li><a href="#about">ABOUT</a></li> <li><a href="#work">WORK</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </div>Côté JS
$(document).ready(function() { // Nav icon $('#nav-icon').click(function() { $(this).toggleClass('open'); $("#menu-overlay").toggleClass("menu-show"); }); });côté CSS
/* Menu mobile */ .menu-media{ position:fixed; top: 0; width:100%; height:90px; background: transparent; z-index:99999; display:block; } .menu-media .menu-content{ width:100%; position:relative; margin:0 auto; } .menu-media .menu-content .logo { color:white; font-weight:700; font-size:24px; width:200px; line-height:160px; float:left; list-style: none; } .menu-media .menu-content .icon{ opacity: .6; width:41px; height:23px; float:right; margin-right: 40px; line-height:110px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .menu-media .menu-content .icon:hover{ opacity: 1; } #menu-overlay{ opacity: 0; background: #111; position: fixed; visibility: hidden; top: 0; width: 100%; height: 100%; z-index: 1000; -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; } #menu-overlay.menu-show { visibility: visible; z-index: 1000; opacity: 1; } ul.menu-click { text-align: center; } .menu-click li a { font-family: "Montserrat", Helvetica,Arial,sans-serif; font-weight: 400; position:relative; color:#fff; font-size:60px; text-align:center; line-height:98px; z-index:1000; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .menu-click li a:hover { color:#2fa68e; } /* Menu */ .menu{ position:relative; width:100%; height:60px; background:white; border-bottom:1px solid #f2f2f2; z-index:1000; } .menu-content{ width:900px; position:relative; margin:0 auto; } .menu-content .logo { color:#333; font-weight:700; font-size:24px; width:300px; line-height:160px; float:left; list-style: none; } .menu-content ul{ width:500px; left:50%; float:right; text-align:right; list-style:none; } .menu-content li{ display:inline-block; position:relative; } .menu-content li a{ color:#333; font-size:16px; display: block; padding: 0 20px 0 20px; line-height:60px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .menu-content li.active a{ color:#2fa68e; } .menu-content li a:hover{ color:#2fa68e; }21 oct. 2018 à 15:46
21 oct. 2018 à 16:16