Posted 23 марта, 20178 yr Добрый день подскажите как мне реализовать добавить выпадающее меню не как не могу реализовать . Хочу сделать выпадающее меню . но каждый раз когда задаю ксс оно криво ставится вот стандартный мой код <div class="wrapper"> <ul> <li><a href="/">ссылка</a></li> <li><a href="/about">ссылка</a></li> <li><a href="/stat">ссылка</a></li> <li><a href="/register">ссылка</a></li> <li><a href="/index.php?f=Donat">ссылка</a></li> <li><a href="/files">ссылка</a></li> <li><a href="http://forum.l2lorriens.ru">ссылка</a></li> </ul> </div> Вот ксс .wrapper { width: 1000px; margin: 0 auto; background-position: center; position: relative; } .navi { background: #211913; height: 53px; text-align: center } .navi ul li { list-style: none; background: url(../images/menu.png) no-repeat right; display: inline-block; vertical-align: top; padding: 0px 0px; margin-left: -3px } .navi ul li a { color: #b5a993; text-align: center; font-size: 15px; height: 53px; line-height: 53px; display: block; padding: 0px 30px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .navi ul li a:hover { background: rgba(0, 0, 0, 0.5); border-bottom: 3px rgba(255, 255, 255, 0.7) solid; } Как добавить выпадающий список к нему ? что бы стили были теже что на моем сайте спасибо зарание .
23 марта, 20178 yr HTML Спойлер <div class="container"> <div class="nav"> <ul> <li>STYLE 1 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> <li>STYLE 2 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> <li>STYLE 3 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> <li>STYLE 4 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> </ul> </div> </div> <div class="container"> <div class="nav"> <ul> <li>STYLE 5 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> <li>STYLE 6 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> <li>STYLE 7 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> <li>STYLE 8 <ul class="drop-menu menu-#{x}"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> </ul> </li> </ul> </div> </div> CSS Спойлер ul { list-style: none; } .container { background-color: #fff; width: 600px; height: 450px; margin: 50px auto; border: 1px solid #333; border-radius: 4px; position: relative; } .nav { display: inline-block; padding: 50px; text-align: center; margin: 0px 10px; position: absolute; } .nav li:hover { background: #4fa9d8; } .nav > ul { list-style: none; padding: 0; margin: 0; display: inline-block; background: #3B95C4; border-radius: 5px; color: rgba(255, 255, 255, 0.7); } .nav > ul > li { float: left; width: 120px; height: 50px; line-height: 50px; position: relative; font-size: 14px; cursor: pointer; } ul.drop-menu { position: absolute; top: 100%; left: 0%; width: 100%; padding: 0; } ul.drop-menu li { background: #318bba; } ul.drop-menu li:hover { background: #459fce; } ul.drop-menu li:first-child { border-radius: 2px 2px 0 0; } ul.drop-menu li:last-child { border-radius: 0 0 5px 5px; } ul.drop-menu li { display: none; } li:hover > ul.drop-menu li { display: block; } li:hover > ul.drop-menu.menu-1 { perspective: 1000px; } li:hover > ul.drop-menu.menu-1 li { transform-origin: top left; opacity: 0; } li:hover > ul.drop-menu.menu-1 li:nth-child(1) { animation-name: menu-1; animation-duration: 300ms; animation-delay: -150ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-1 li:nth-child(2) { animation-name: menu-1; animation-duration: 300ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-1 li:nth-child(3) { animation-name: menu-1; animation-duration: 300ms; animation-delay: 150ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-1 li:nth-child(4) { animation-name: menu-1; animation-duration: 300ms; animation-delay: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-1 li:nth-child(5) { animation-name: menu-1; animation-duration: 300ms; animation-delay: 450ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-1 li:nth-child(6) { animation-name: menu-1; animation-duration: 300ms; animation-delay: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-1 { 0% { opacity: 0; transform: rotateZ(90deg); } 70% { transform: skewX(10deg); } 100% { opacity: 1; transform: rotateZ(0deg); } } li:hover > ul.drop-menu.menu-2 { perspective: 1000px; } li:hover > ul.drop-menu.menu-2 li { transform-origin: top center; opacity: 0; } li:hover > ul.drop-menu.menu-2 li:nth-child(1) { animation-name: menu-2; animation-duration: 300ms; animation-delay: -150ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-2 li:nth-child(2) { animation-name: menu-2; animation-duration: 300ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-2 li:nth-child(3) { animation-name: menu-2; animation-duration: 300ms; animation-delay: 150ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-2 li:nth-child(4) { animation-name: menu-2; animation-duration: 300ms; animation-delay: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-2 li:nth-child(5) { animation-name: menu-2; animation-duration: 300ms; animation-delay: 450ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-2 li:nth-child(6) { animation-name: menu-2; animation-duration: 300ms; animation-delay: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-2 { 0% { opacity: 0; transform: rotateX(-90deg); } 50% { transform: rotateX(20deg); } 100% { opacity: 1; transform: rotateX(0deg); } } li:hover > ul.drop-menu.menu-3 { perspective: 1000px; } li:hover > ul.drop-menu.menu-3 li { transform-origin: top center; opacity: 0; } li:hover > ul.drop-menu.menu-3 li:nth-child(1) { animation-name: menu-3; animation-duration: 300ms; animation-delay: -150ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-3 li:nth-child(2) { animation-name: menu-3; animation-duration: 300ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-3 li:nth-child(3) { animation-name: menu-3; animation-duration: 300ms; animation-delay: 150ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-3 li:nth-child(4) { animation-name: menu-3; animation-duration: 300ms; animation-delay: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-3 li:nth-child(5) { animation-name: menu-3; animation-duration: 300ms; animation-delay: 450ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-3 li:nth-child(6) { animation-name: menu-3; animation-duration: 300ms; animation-delay: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-3 { 0% { opacity: 0; transform: rotateY(90deg); } 70% { transform: rotateY(-10deg); } 100% { opacity: 1; transform: rotateY(0deg); } } li:hover > ul.drop-menu.menu-4 { perspective: 1000px; } li:hover > ul.drop-menu.menu-4 li { transform-origin: top center; opacity: 0; } li:hover > ul.drop-menu.menu-4 li:nth-child(1) { animation-name: menu-4; animation-delay: -150ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-4 li:nth-child(2) { animation-name: menu-4; animation-delay: 0ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-4 li:nth-child(3) { animation-name: menu-4; animation-delay: 150ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-4 li:nth-child(4) { animation-name: menu-4; animation-delay: 300ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-4 li:nth-child(5) { animation-name: menu-4; animation-delay: 450ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-4 li:nth-child(6) { animation-name: menu-4; animation-delay: 600ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-4 { 0% { opacity: 0; transform: translateX(-100px); } 70% { transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0px); } } li:hover > ul.drop-menu.menu-5 { perspective: 1000px; } li:hover > ul.drop-menu.menu-5 li { transform-origin: top center; opacity: 0; } li:hover > ul.drop-menu.menu-5 li:nth-child(1) { animation-name: menu-5; animation-duration: 150ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-5 li:nth-child(2) { animation-name: menu-5; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-5 li:nth-child(3) { animation-name: menu-5; animation-duration: 450ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-5 li:nth-child(4) { animation-name: menu-5; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-5 li:nth-child(5) { animation-name: menu-5; animation-duration: 750ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-5 li:nth-child(6) { animation-name: menu-5; animation-duration: 900ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-5 { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; } 90% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } li:hover > ul.drop-menu.menu-6 { perspective: 1000px; } li:hover > ul.drop-menu.menu-6 li { transform-origin: top right; opacity: 0; } li:hover > ul.drop-menu.menu-6 li:nth-child(1) { animation-name: menu-6; animation-delay: -150ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-6 li:nth-child(2) { animation-name: menu-6; animation-delay: 0ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-6 li:nth-child(3) { animation-name: menu-6; animation-delay: 150ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-6 li:nth-child(4) { animation-name: menu-6; animation-delay: 300ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-6 li:nth-child(5) { animation-name: menu-6; animation-delay: 450ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-6 li:nth-child(6) { animation-name: menu-6; animation-delay: 600ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-6 { 0% { opacity: 0; margin-top: 50px; transform: rotate(-45deg); } 90% { margin-top: -10px; transform: rotate(0deg); } 100% { opacity: 1; margin-top: 0px; } } li:hover > ul.drop-menu.menu-7 { perspective: 1000px; } li:hover > ul.drop-menu.menu-7 li { transform-origin: top left; opacity: 0; } li:hover > ul.drop-menu.menu-7 li:nth-child(1) { animation-name: menu-7; animation-delay: -150ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-7 li:nth-child(2) { animation-name: menu-7; animation-delay: 0ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-7 li:nth-child(3) { animation-name: menu-7; animation-delay: 150ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-7 li:nth-child(4) { animation-name: menu-7; animation-delay: 300ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-7 li:nth-child(5) { animation-name: menu-7; animation-delay: 450ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-7 li:nth-child(6) { animation-name: menu-7; animation-delay: 600ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-7 { 0% { opacity: 0; transform: rotateY(90deg); margin-top: -100px; } 80% { margin-top: 0px; transform: rotateY(90deg); } 90% { transform: rotateY(-10deg); margin-top: 5px; } 100% { opacity: 1; margin-top: 0px; transform: rotateY(0deg); } } li:hover > ul.drop-menu.menu-8 { perspective: 1000px; } li:hover > ul.drop-menu.menu-8 li { transform-origin: top left; opacity: 0; } li:hover > ul.drop-menu.menu-8 li:nth-child(1) { animation-name: menu-8; animation-delay: 75ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-8 li:nth-child(2) { animation-name: menu-8; animation-delay: 150ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-8 li:nth-child(3) { animation-name: menu-8; animation-delay: 225ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-8 li:nth-child(4) { animation-name: menu-8; animation-delay: 300ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-8 li:nth-child(5) { animation-name: menu-8; animation-delay: 375ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } li:hover > ul.drop-menu.menu-8 li:nth-child(6) { animation-name: menu-8; animation-delay: 450ms; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out; } @keyframes menu-8 { 0% { opacity: 0; transform: skewX(45deg) skewY(-45deg); } 80% { transform: skewX(-10) skewY(-10); } 100% { opacity: 1; transform: skewX(0deg) skewY(0deg); } } Резултат:
23 марта, 20178 yr Author Вы не поняли я хочу добавить к своему меню к своим стилям выпадающее а не заменить полностью . какие ксс отвечает за всплывающее меню Даже ваше меню включаю у меня не срабатует оно
23 марта, 20178 yr 6 минут назад, MMOUR сказал: Вы не поняли я хочу добавить к своему меню к своим стилям выпадающее а не заменить полностью . какие ксс отвечает за всплывающее меню А у вас IPS 4 ?
23 марта, 20178 yr https://invisionpower.com/4guides/themes-and-customizations/css-framework/dropdown-menus-r94/ или Может използват ето плагин promenu-plus-extra.zip Promenu_Plus-3.2.1.zip
23 марта, 20178 yr Author Нет у меня SW 13 там html5 У меня есть уже меню мне надо подключиить что бы всплывало меню добавить в ксскод просто я не знаю какой
1 апреля, 20178 yr html Спойлер <div class="navi"> <div class="wrapper"> <ul> <li> <a href="/">ссылка</a> <ul class="sub-menu"> <li><a href="/about">sub menu</a></li> <li><a href="/stat">sub menu</a></li> <li><a href="/about">sub menu</a></li> </ul> </li> <li><a href="/about">ссылка</a> <ul class="sub-menu"> <li><a href="/about">sub menu</a></li> <li><a href="/stat">sub menu</a></li> <li><a href="/about">sub menu</a></li> </ul></li> <li> <a href="/stat">ссылка</a> <ul class="sub-menu"> <li><a href="/about">sub menu</a></li> <li><a href="/stat">sub menu</a></li> <li><a href="/about">sub menu</a></li> </ul> </li> <li><a href="/register">ссылка</a></li> <li> <a href="/index.php?f=Donat">ссылка</a> <ul class="sub-menu"> <li><a href="/about">sub menu</a></li> <li><a href="/stat">sub menu</a></li> <li><a href="/about">sub menu</a></li> </ul> </li> <li><a href="/files">ссылка</a></li> <li><a href="http://forum.l2lorriens.ru">ссылка</a></li> </ul> </div> </div> css Спойлер .wrapper { width: 1000px; margin: 0 auto; background-position: center; position: relative; } .navi { background: #211913; height: 53px; text-align: center } .navi ul li { list-style: none; background: url(../images/menu.png) no-repeat right; display: inline-block; vertical-align: top; padding: 0px 0px; margin-left: -3px; } .navi ul li a { color: #b5a993; text-align: center; font-size: 15px; height: 53px; line-height: 53px; display: block; padding: 0px 30px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .navi ul li:hover { background: rgba(0, 0, 0, 0.5); border-bottom: 3px rgba(255, 255, 255, 0.7) solid; } .navi li { position: relative; } .sub-menu { opacity: 0; visibility: hidden; background: #211913; position: absolute; top: 53px; left: -28px; margin-top: 20px; width: 160px; padding: 0; transition: all .2s ease-in-out; } .navi li:hover .sub-menu { opacity: 1; visibility: visible; margin: 0; } .sub-menu li { display: block !important; margin-left: 0 !important; } .sub-menu li:hover { background: rgba(0, 0, 0, 0.5); border-bottom: none !important; } .sub-menu a { display: block !Important; } Edited 1 апреля, 20178 yr by Fateswhisper
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.