Posted 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; } Как добавить выпадающий список к нему ? что бы стили были теже что на моем сайте спасибо зарание . Link to comment https://ipbmafia.ru/topic/16993-menyu/ Share on other sites Больше вариантов
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); } } Резултат: Link to comment https://ipbmafia.ru/topic/16993-menyu/?&do=findComment&comment=125586 Share on other sites Больше вариантов
23 марта, 20177 yr Author comment_125593 Вы не поняли я хочу добавить к своему меню к своим стилям выпадающее а не заменить полностью . какие ксс отвечает за всплывающее меню Даже ваше меню включаю у меня не срабатует оно Link to comment https://ipbmafia.ru/topic/16993-menyu/?&do=findComment&comment=125593 Share on other sites Больше вариантов
23 марта, 20177 yr comment_125594 6 минут назад, MMOUR сказал: Вы не поняли я хочу добавить к своему меню к своим стилям выпадающее а не заменить полностью . какие ксс отвечает за всплывающее меню А у вас IPS 4 ? Link to comment https://ipbmafia.ru/topic/16993-menyu/?&do=findComment&comment=125594 Share on other sites Больше вариантов
23 марта, 20177 yr comment_125597 49 минут назад, Silence сказал: А у вас IPS 4 ? 3.4 Link to comment https://ipbmafia.ru/topic/16993-menyu/?&do=findComment&comment=125597 Share on other sites Больше вариантов
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 Link to comment https://ipbmafia.ru/topic/16993-menyu/?&do=findComment&comment=125600 Share on other sites Больше вариантов
23 марта, 20177 yr Author comment_125602 Нет у меня SW 13 там html5 У меня есть уже меню мне надо подключиить что бы всплывало меню добавить в ксскод просто я не знаю какой Link to comment https://ipbmafia.ru/topic/16993-menyu/?&do=findComment&comment=125602 Share on other sites Больше вариантов
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 1 апреля, 20177 yr by Fateswhisper Link to comment https://ipbmafia.ru/topic/16993-menyu/?&do=findComment&comment=126162 Share on other sites Больше вариантов
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.