Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu Accordéon

Problème

m406278
    2 octobre 2021 à 12:59:55

    Bonjour,

    Je suis entrain de concevoir mon site internet et j'ai un problème dans mon menu. J'aimerais que le texte studio se déplie en accordéon pour montrer les lien vers les pages personnages, portraits, et femmes. Ce qui engendrerait que me lien contact se baisse quand les sous menu studio s'ouvre, mais malgré plusieurs essais je n'y arrive pas.

    Merci de votre aide

    Voici mon html puis mon 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:54:08

    • Partager sur Facebook
    • Partager sur Twitter
    ChrisLebure
      2 octobre 2021 à 13:26:12

      Bonjour,

      il faut le code CSS et HTML, non sous forme d'image mais en utilisant l'icône </> au dessus de la zone où on écrit le texte du message, taper le code ou bien le copier/coller

      Là c'est illisible et inutilisable

      • Partager sur Facebook
      • Partager sur Twitter
      m406278
        2 octobre 2021 à 13:36:37

        D'accord merci je ne savais pas je vais le reposter
        • Partager sur Facebook
        • Partager sur Twitter
        AbcAbc6
          2 octobre 2021 à 14:07:47

          Bonjour, passez votre code au validateur pour voir et corriger vos erreurs. => https://validator.w3.org/

          Tout ce qui est affichage doit être dans le body et pas en dehors, donc <header> dans le body.

          Si vous utilisez une liste <ul> ou <ol> son enfant direct est obligatoirement un <li>. Rien d'autre.

          Si tu cherches à réaliser un menu déroulant voir http://www.frogweb.fr/

          -
          Edité par AbcAbc6 2 octobre 2021 à 14:08:30

          • Partager sur Facebook
          • Partager sur Twitter

          Menu Accordéon

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown