Posted March 23, 20177 yr comment_125570 Добрый день подскажите как мне реализовать добавить выпадающее меню не как не могу реализовать . Хочу сделать выпадающее меню . но каждый раз когда задаю ксс оно криво ставится вот стандартный мой код <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; } Как добавить выпадающий список к нему ? что бы стили были теже что на моем сайте спасибо зарание .
March 23, 20177 yr comment_125586 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); } } Резултат:
March 23, 20177 yr Author comment_125593 Вы не поняли я хочу добавить к своему меню к своим стилям выпадающее а не заменить полностью . какие ксс отвечает за всплывающее меню Даже ваше меню включаю у меня не срабатует оно
March 23, 20177 yr comment_125594 6 минут назад, MMOUR сказал: Вы не поняли я хочу добавить к своему меню к своим стилям выпадающее а не заменить полностью . какие ксс отвечает за всплывающее меню А у вас IPS 4 ?
March 23, 20177 yr comment_125600 https://invisionpower.com/4guides/themes-and-customizations/css-framework/dropdown-menus-r94/ или Может използват ето плагин promenu-plus-extra.zip Promenu_Plus-3.2.1.zip
March 23, 20177 yr Author comment_125602 Нет у меня SW 13 там html5 У меня есть уже меню мне надо подключиить что бы всплывало меню добавить в ксскод просто я не знаю какой
April 1, 20177 yr comment_126162 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 April 1, 20177 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.