Search the Community

Как сделать такое меню? А точнее плашку при наведении. У меня получается так http://jsfiddle.net/zfQQX/1/ Я понимаю, что где-то пробел в знаниях здесь, или метод впринципе неверен. Подскажите пожалуйста

Здравствуйте, необходимо было меню с выпадающими подпунктами, нашел в инете готовое решение, переверстал под свой дизайн, все работает как нужно, одна беда - вылазит подпункты при определенной ширине меню, если ширину увеличить, то все становиться на свои места, однако увеличивать уже некуда, хотелось бы наоборот уменьшить, но тогда вылазит еще больше подпунктов: Лопатил css, но никак не могу понять как убрать это вот код: .navTitle{ padding: 10px; background: #4b9342; } .navTitle p{font-size: 16px; font-weight: bold; color: #fff;} #nav { margin: 15px 0 10px 10px; border:2px solid #4b9342; box-shadow:2px 2px 8px #000000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #nav, #nav ul { list-style:none; padding:0; width:250px; } #nav ul { position:relative; z-index:-1; } #nav li { position:relative; z-index:100; } #nav ul li { margin-top:-23px; -moz-transition: 0.4s linear 0.4s; -ms-transition: 0.4s linear 0.4s; -o-transition: 0.4s linear 0.4s; -webkit-transition: 0.4s linear 0.4s; transition: 0.4s linear 0.4s; } #nav li a { background-color:#fff; color:#000; display:block; font-size:14px; font-weight:bold; line-height:30px; outline:0; padding-left:10px; text-decoration:none; border-bottom: 1px solid #4b9342; } #nav li a img { border-width:0px; height:24px; line-height:28px; margin-right:8px; vertical-align:middle; width:24px; } #nav li a:hover { color: #4b9342; } #nav ul li a { padding-left: 20px; background-color:#eee; border-bottom:1px solid #ccc; color:#000; font-size:12px; line-height:22px; } #nav ul li a:hover { background-color:#ddd; color:#444; } #nav a.sub:focus { color: #4b9342; outline:0; } #nav a:focus ~ ul li { margin-top:0; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linears; -webkit-transition: 0.4s linears; transition: 0.4s linear; } #nav a:focus + img, #nav a:active + img { display:block; } #nav a.sub:active { outline:0; } #nav a:active ~ ul li { margin-top:0; } #nav ul:hover { display:block; } И HTML: <nav> <ul id="nav"> <div class="navTitle"><p>Школьные принадлежности</p></div> <li><a href="#" class="sub" tabindex="1">Бумажно-беловая продукция</a> <ul> <li><a href="#">Альбомы для рисования</a></li> <li><a href="#">Блокноты, записные книжки</a></li> <li><a href="#">Бумага цветная, картон</a></li> <li><a href="#">Папки для тетрадей и труда</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Настольные принадлежности</a> <ul> <li><a href="#">Глобусы</a></li> <li><a href="#">Калькуляторы карманные</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Офисные принадлежности и инструменты</a> <ul> <li><a href="#">Клей</a></li> <li><a href="#">Ножницы детские</a></li> <li><a href="#">Пеналы офисные, боксы</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Принадлежности для делопроизводства</a> <ul> <li><a href="#">Папки, портфели пластиковые</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Принадлежности для письма,черчения и рисования</a> <ul> <li><a href="#">Карандаши восковые</a></li> <li><a href="#">Карандаши графитные</a></li> <li><a href="#">Карандаши механические</a></li> <li><a href="#">Карандаши пастельные</a></li> <li><a href="#">Карандаши цветные</a></li> <li><a href="#">Кисти</a></li> <li><a href="#">Краски акварельные</a></li> <li><a href="#">Краски для оформительских работ</a></li> <li><a href="#">Краски-гуашь</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Рюкзаки, портфели, сумки, пеналы</a> <ul> <li><a href="#">Пеналы секционные</a></li> <li><a href="#">Пеналы-кошельки</a></li> <li><a href="#">Рюкзаки для младших и средних классов</a></li> <li><a href="#">Рюкзаки подростковые</a></li> <li><a href="#">Сумки молодежные</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Товары для творчества</a> <ul> <li><a href="#">Доски для письма и рисования</a></li> <li><a href="#">Наборы для рукоделия</a></li> <li><a href="#">Наборы для скарпбукинга</a></li> <li><a href="#">Пластилин</a></li> <li><a href="#">Пластилин-наборы</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">XSLT</a> <ul> <li><a href="#">Обложки для книг и тетрадей</a></li> <li><a href="#">Папки, портфели школьные</a></li> <li><a href="#">Пеналы, стаканы настольные</a></li> <li><a href="#">Подставки для книг </a></li> <li><a href="#">Развиваюшие пособия</a></li> </ul> </li> </ul> </nav> Подскажите пожалуйста как это можно поправить?

Как сверстать такое меню используя по максимуму css

Всем Доброго времени суток! У меня возникла проблемка которую надо срочно решить . Вот сверстал пример меню (чтобы вам было понятно наглядно) http://youtime.hol.es/ который будет на сайте При наведении на новости выпадает подменю. Так вот нужно чтобы при фокусе на подменю , цвет ссылки высшего уровня (новости) оставался золотым. Сам додуматься не могу(

Добрый вечер, Разрабатываю сайт, одним из основных требований к которому есть адаптивная верстка. Все довольно просто, но есть проблема - на определенной ширине дисплея нужно превращать меню в кастомизированый dropdown. Напрашивается подключение плагина и мониторинг текущей ширины дисплея через js, но кажется, что это решение "с душком". Подскажите, возможно ли реализовать это более "чисто", и если да, то как? Вот меню, над которым оперирую. С уважением, Михась

Доброго времени суток! есть такая проблема - в вертикальном меню "аккордеон" все время открыт первый пункт... к огромному сожалению это совсем ни к чему, во всяком случае на всех страницах. Как открыть нужные подпункты там где надо, я уже разобрался, а вот как закрыть этот первый пункт не знаю... облазил все... Как все это дело выглядит можно посмотреть тут: http://perfectionstudio.ru/palve/index.html, если надо напишу сюда все коды..) Буду очень-очень благодарен за помощь!

Здравствуйте уважаемые форумчане! Я не являюсь профессионалом сайтостроения, т.е. о-очень много не знаю. У меня возник такой вопрос. Попробую описать его. Предположим у меня есть блок, который "прижат" к левому краю. При нажатии на данный блок, он должен выдвинуться вправо, "потянув" за собой другой блок. Ну так вот, как это сделать? Подскажите пожалуйста. Вроде понятно. Если нет, буду рад объяснить снова. Прошу простить за косой язык, незнание языков профессиональных и отсутсвие примера (постараюсь найти). Заранее спасибо.

Доброго времени суток! У меня следующий вопрос! Есть небольшой каталог продукции.. сделан простенько на css и jquerry. Хотелось бы сделать так, чтобы при переходе на какую либо страницу в каталоге "раздвинутый" раздел запоминался. Практически все каталоги так сделаны, но я честно говоря не знаю как это реализовать.. Буду очень благодарен любой помощи!! Ссылка на все это дело: http://perfectionstudio.ru/palve/index.html если нужно, выложу сюда все коды!

Здравствуйте... У меня есть вопрос, как сделать кнопку активной после нажатия на нее.. Допустим имеется ссылка в навигационной панели, нажимаешь на необходимую категорию, после перехода, - это кнопка имеет друргой цвет - что показывает что она сейчас активна...

В опере иногда сьезжает #wrapper{ margin:50px auto 0px auto; width:960px; height:auto; } aside{ width:309px; padding:10px; float:left; height:auto; border-collapse: collapse; } article{ width:609px; padding:10px; float:left; height:auto; border-left:1px solid #B9E3F3; border-collapse: collapse; } .clear{clear:both;} footer{ border-top:1px solid #B9E3F3; width:940px; padding:10px; height:auto; } nav{ position:fixed; top:0; left:0; padding:0px; margin:0px; width:100%; height:50px; background:black; } <!DOCTYPE HTML> <head> <meta http-equiv="content-type" content="text/html" /> <title>Sign in Mysite</title> </head> <body> <nav> </nav> <div id="wrapper"> <aside> Блок </aside> <article> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet. Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi. Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam. Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet. Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi. Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam. Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien. </article> <div class="clear"></div> <footer> Футер </footer> </div> </body> </html>

Доброго времени суток! Раньше делал статичные сайты и не заморачивался, а вот тут вдруг решил освоить верстку на wp, и вдруг возникла проблема. Как можно сделать выделение пункта меню. Например как на apple.com. Когда переходишь например; на страницу "contact" и пункт меню conact как либо выделяется. В статичном сайте я бы просто на каждую страницу присвоил другой класс из пункта этой страницы, а тут как?

Добрый день! Помогите, пожалуйста, с кодом. Меню. Иконки (в примере она одна) будут расположены вертикально (всего их будет шесть штук). В "спокойной режиме", видно только иконки (с изображением). При наведении "выезжает" плашка с текстом. И пользователь может нажать как на иконку, так и на плашку. Как только указатель мышки "ушел", плашка снова пропадает. Помогите, пожалуйста!

Доброго времени суток! Никак не могу скрыть блок выпадающего меню... Помогите плиз!!! Вот код CSS, тут просто какая-то мелочь, но я этого не могу увидеть: /*—————-menu tab———————-*/ .menu { font-size:14px; padding:0; float:left; width:890px; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; height:35px; } /* style the sub-level lists */ .menu ul ul { width:auto; } /* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu ul li { float:left; height:35px; line-height:35px; list-style-type:none; } /* style the sub level list items */ .menu ul ul li { display:block; width:auto; height:auto; position:relative; line-height:1em; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; float:left; height:15px; font-size:14px; text-decoration:none; color:#5a5a5a; padding:0 3px 0 3px; margin:0 30px 0 0; } .menu a.current { background-color:#FFFFFF; } /* style the sub level links */ .menu ul ul a, .menu ul ul a:visited { display:block; font-size:13px; text-align:left; color:#545554; width:200px; height:15px; line-height:1em; padding:5px 0 5px 5px; border-bottom:1px #ebebeb solid; background-color:#fff; } .menu ul table ul a, .menu ul table ul a:visited { width:14em; w\idth:12em; } /* style the table so that it takes no part in the layout - required for IE to work */ .menu table { position:absolute; left:0; top:0; font-size:1em; z-index:-1; } .menu ul ul table { lef\t:-1px; } .menu ul ul table ul.left { margin-lef\t:2px; } .menu li:hover { position:relative; } * html .menu a:hover { position:relative; } /* style the sub level 1 background */ .menu ul :hover a.sub1 { background:#fff; } /* style the sub level 2 background */ .menu ul ul :hover a.sub2 { background:#fff; } /* style the level hovers */ /* first */ .menu a:hover { color:#de462a; } .menu :hover > a { color:#de462a; } /* second */ .menu ul ul a:hover { background-color:#de462a; color:#FFFFFF; } .menu ul ul :hover > a { background-color:#de462a; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:35px; left:0; width:14em; border:none; z-index:9999; background-color:#FFFFFF; } /* position the third level flyout menu */ .menu ul ul ul { left:15em; top:0; width:14em; } /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left { left:-14em; } /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul { visibility:visible; height:auto; padding-bottom:3em; background:transparent; }

Как кроссбраузерно сверстать такое вот меню? Тут больше интересуют углы. Если кроссбраузерно, то картинкой, правильно? А как именно - понять не могу.