- 0
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-
Question
marianna9201
Добрый день!
Есть одно приметное меню для сайта. Хотелось бы узнать, как реализовать в данном меню раскрытие дочерних пунктов не только при нажатии на родительский пункт, но и на при наведении курсора?
Вот пример меню: http://pcvector.net/uploads/demo/scripts/accordion/flat_menu_accordion/index.html
А вот и код:
HTML + JQuery
<!DOCTYPE><html><head> <title>Flat accordion menu | pcvector.net</title> <link rel="shortcut icon" href="/favicon.ico" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> <style> .demo_container{ margin:100px auto; width:300px; } </style> <script type="text/javascript"> $(document).ready(function () { $('#cssmenu > ul > li ul').each(function(index, e){ var count = $(e).find('li').length; var content = '<span class=\"cnt\">' + count + '</span>'; $(e).closest('li').children('a').append(content); }); $('#cssmenu ul ul li:odd').addClass('odd'); $('#cssmenu ul ul li:even').addClass('even'); $('#cssmenu > ul > li > a').click(function() { $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } }); }); </script></head><body><div class="topHeader"> <a class="backArticle" href="http://pcvector.net/scripts/accordion/444-flat-accordion-menu-vertikalnyy-akkordeon.html">Назад к статье >>></a></div><div class="demo_container"> <div id='cssmenu'> <ul> <li class='active'><a href='/'><span>Главная</span></a></li> <li class='has-sub'><a href='#'><span>Каталог</span></a> <ul> <li><a href='#'><span>Смартфоны</span></a></li> <li><a href='#'><span>Планшеты</span></a></li> <li><a href='#'><span>Ноутбуки</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>О компании</span></a> <ul> <li><a href='#'><span>Сотрудники</span></a></li> <li><a href='#'><span>Вакансии</span></a></li> </ul> </li> <li><a href='#'><span>Контакты</span></a></li> </ul> </div></div> <!-- pcvector.net --><script type="text/javascript" src="http://pcvector.net/templates/pcv/js/pcvector.js"></script><!-- /pcvector.net --> </body></html>CSS:
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-family:sans-serif,arial; font-size: 14px; position: relative;}#cssmenu a { line-height: 1.3;}#cssmenu { width: 250px;}#cssmenu > ul > li > a { padding-right: 40px; font-size: 25px; font-weight: bold; display: block; background: #bd0e36; color: #ffffff; border-bottom: 1px solid #5e071b; text-transform: uppercase;}#cssmenu > ul > li > a > span { background: #ed1144; padding: 10px; display: block; font-size: 13px; font-weight: 300;}#cssmenu > ul > li > a:hover { text-decoration: none;}#cssmenu > ul > li.active { border-bottom: none;}#cssmenu > ul > li.active > a { color: #fff;}#cssmenu > ul > li.active > a span { background: #bd0e36;}#cssmenu span.cnt { position: absolute; top: 8px; right: 15px; padding: 0; margin: 0; background: none;}/* Sub menu */#cssmenu ul ul { display: none;}#cssmenu ul ul li { border: 1px solid #e0e0e0; border-top: 0;}#cssmenu ul ul a { padding: 10px; display: block; color: #ed1144; font-size: 13px;}#cssmenu ul ul a:hover { color: #bd0e36;}#cssmenu ul ul li.odd { background: #f4f4f4;}#cssmenu ul ul li.even { background: #fff;}Заранее большое спасибо за подсказку!
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
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.