Menu

Crée un site web [Résolu]

Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Dernière intervention
30 novembre 2018
-
Bonjour, amis de la comunauté CCM, j'ai quelques bases en développement web je souhaiterai crée mon site internet inspiré de celui-ci: h t t p : / / www. virgiliudiaconu.com *modération*
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.

merci d'avance
Afficher la suite 

Votre réponse

5 réponses

Messages postés
23598
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
0
Merci
Bonjour,

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é.


Salut,
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.
jordane45
Messages postés
23598
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Bonjour,
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;
}
faridtounsi
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Dernière intervention
30 novembre 2018
-
bonjour jordan45 et merci pour le code mais il ne fonctionne pas, j'ai essayer de l'intégrer dans mon code ça n'a pas fonctionner, puis j'ai essayer le code tous seul et il ne fonctionne pas non plus!
jordane45
Messages postés
23598
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Ce n'est qu'une partie du code... tu trouveras le reste sur le site d'origine
faridtounsi
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Dernière intervention
30 novembre 2018
-
ok je vais checker ça et je reviens
Commenter la réponse de jordane45
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Dernière intervention
30 novembre 2018
0
Merci
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:


<!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 );

Commenter la réponse de faridtounsi
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Dernière intervention
30 novembre 2018
0
Merci
up !!!
bg62
Messages postés
23044
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
8 décembre 2018
-
le 'up' ne sert à rien, si quelqu'un veut essayer de t'aider ... il arrivera :)
Commenter la réponse de faridtounsi
Messages postés
6
Date d'inscription
jeudi 29 novembre 2018
Dernière intervention
29 novembre 2018
0
Merci
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
Commenter la réponse de lemilemm
Messages postés
7
Date d'inscription
vendredi 19 octobre 2018
Dernière intervention
30 novembre 2018
0
Merci
le problème est résolue !!!!!!
Commenter la réponse de faridtounsi