Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu Accordéon

Problème

m406278
2 octobre 2021 à 13:42:40

 Je code mon site et j'ai un problème. J'aimerais que l'item studio se déroule en passant dessus pour découvrir les sous menu portrait, personnages, femmes. Ce qui impliquerai aussi que l'item contact se déplace en fonction de cela. Après plusieurs essai, je n'y arrive pas, merci pour votre aide.

Voici le code html et css

<!DOCTYPE html>
<html lang="fr" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
		<title>Laurine Djoudi - Photographie</title>
	</head>

	<header>
		Laurine Djoudi - Photographie
	</header>

<body>
		<svg class="hidden">
			
			<symbol id="icon-menu" viewBox="0 0 119 25">
				<title>menu</title>
				<path d="M36,8 L36,0 L100,0 L100,8 L36,8 Z M0,8 L0,0 L24,0 L24,8 L0,8 Z M0,28 L0,20 L71,20 L71,28 L0,28 Z"/>
			</symbol>
			<symbol id="icon-close" viewBox="0 0 24 24">
				<title>close</title>
				<path d="M24 1.485L22.515 0 12 10.515 1.485 0 0 1.485 10.515 12 0 22.515 1.485 24 12 13.484 22.515 24 24 22.515 13.484 12z"/>
			</symbol>
		</svg>
		<main>

<div class="content">
				<div class="background" style="background-image: url(img/1.jpg)"></div>
			</div>
<nav class="menu">
				<div class="menu__item menu__item--1" data-direction="bt">
					<div class="menu__item-inner">
						<div class="mainmenu">
							<a href="LAD.html" class="mainmenu__item">Home</a>
							<ul id="menu__item">
								<a class="mainmenu__item">Studio</a>
								<a href="./Femmes.html">Femmes</a>
								<a href="./Portraits.html">Portraits</a>
								<a href="./Personnages">Personnages</a>
							</ul>
							<a href="./Contact.html" class="mainmenu__item">Contact</a>
							
						</div>
					</div>
				</div>

				<button class="action action--menu"><svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg></button>
				<button class="action action--close"><svg class="icon icon--close"><use xlink:href="#icon-close"></use></svg></button>
			</nav>
		</main>
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script src="js/TweenMax.min.js"></script>
		<script src="js/demo.js"></script>
	</body>
</html>


article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
@import url('https://fonts.googleapis.com/css2?family=Caramel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');



a{color: black;}

header{
color: black;
text-align: center;
font-family: 'Caramel', cursive;
font-size: 30px;
margin-top: -80px;
}

p{ color: black;
text-align: left;
font-family: font-family: 'Scheherazade New', serif;
font-size: 100%; }

body {
	--color-text: #fff;
	--color-bg: #white;
	--color-link: #fff;
	--color-link-hover: #f20c40;
	--color-bg-item1: grey;
	--color-item-alt: grey;
	--color-quote: #5b677a;
	--color-info: #57535a;
	--color-title: #e23434;
	--color-tagline: #e2e2e2;
	font-family: "europa", Futura, Arial, sans-serif;
	min-height: 100vh;
	color: #57585c;
	color: var(--color-text);
    background-color: var(--color-bg);
	overflow: hidden;
	padding: 6rem 0 0 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	transition: color 0.2s;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

.action {
	background: none;
	border: 0;
	color: black;
	cursor: pointer;
	padding: 0;
}

.action--menu {
	pointer-events: auto;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 1000;
}

.menu--open .action--menu {
	pointer-events: none;
}

.action--close {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	z-index: 1000;
	opacity: 0;
	padding: 0 0.5rem;
}

.icon--menu {
	width: 2rem;
}

.icon--close {
	width: 1rem;
}

.menu {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(3,33.33%);
	pointer-events: none;
}

.menu--open {
	pointer-events: auto;
}

.menu__item {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.menu__item-inner {
	overflow: hidden;
	transform: translate3d(100%,0,0);
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.menu__item--1 .menu__item-inner {
	background: var(--color-bg-item1);
}

.menu__item-hoverlink:hover {
	color: var(--color-link);
}

	.menu {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		grid-template-columns: 20% 30% 50%;
		grid-template-rows: 60% 40%;
		grid-template-areas: 
            "item3 item2 item1"
            "item4 item5 item1";
	}
	.menu__item {
		height: 100%;
	}
	.menu__item--1 {
		grid-area: item1;
	}
	.menu__item-inner {
		align-items: center;

	}
	.label {
		display: block;
		color: var(--color-item-alt);
		position: absolute;
		z-index: 1000;
		font-size: 0.85rem;
		font-weight: bold;
		margin: 0;
		white-space: nowrap;
	}
	
	.mainmenu,
	.sidemenu {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

-
Edité par m406278 2 octobre 2021 à 13:47:00

  • Partager sur Facebook
  • Partager sur Twitter
AbcAbc6
2 octobre 2021 à 13:56:39

Bonjour,

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet :  https://openclassrooms.com/forum/sujet/menu-accordeon-6

Liens conseillés

Je ferme ce sujet. 

  • Partager sur Facebook
  • Partager sur Twitter