Поиск по сайту

Результаты поиска по тегам 'меню'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу



Фильтр по количеству...

Найдено 80 результатов

  1. Сползающие меню

    Здравствуйте. Я только начинаю постигать искусство верстки, и делаю свою первую страницу в портфолио. Вот страница У нее существует меню, но когда я начинаю уменьшать масштаб страницы, пункты меню начинают сползать: При дальнейшем уменьшении масштаба вся верстка, просто съезжает: Прошу, помогите решить проблему, ибо на других сайтах такого нет. Прилагаю html код и css стили. <body><!--Общая обертка для сайта--><div id="wrapper"> <!-- Шапка сайта--> <div id="header"> <div id="search"> <a href="#">Войти</a> </div> <div id="main_menu_high"> <nav> <ul> <li><a href= "index.html">Главная</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> <li><a href="#">Недвижимость</a></li> <li><a href="#">Подарки</a></li> </ul> </nav> </div> <div id="main_menu_low"> <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> </ul> </div> </div> <!-- Левый сайдбар--> <div id="sidebar_left"> <h3 id="transport" class="blueclass">Транспорт</h3> <div> <p><a id="SellAuto" href= "#">Продажа автомобилей</a></p> <p><a href= "#">Автозапчасти</a></p> <p><a href= "#">Автолектроника</a></p> </div> <h3 id="house" class="blueclass">Дом и дача</h3> <div> <p><a href= "#">Мебель</a></p> <p><a href= "#">Сроительство</a></p> <p><a href= "#">Ремонт</a></p> </div> <h3 id="clothes" class="blueclass">Одежда</h3> <div> <p><a href= "#">Одежда</a></p> <p><a href= "#">Обувь</a></p> </div> <h3 id="health" class="blueclass">Здоровье</h3> <div> <p><a href= "#">Прием врачей</a></p> <p><a href= "#">Диагностика</a></p> <p><a href= "#">Процедуры</a></p> </div> </div> <!--правый сайдбар--> <div id="sidebar_right"> <ul> <li><a href= "#">Прием врачей</a></li> <li><a href= "#">Диагностика</a></li> <li><a href= "#">Процедуры</a></li> </ul> </div> <!-- Поле с контентом--> <div id="central"> <ul class="table"> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить авто</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Сделать ремонт</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить мебель</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить бытовую технику</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить компьютер</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить одежду, обувь</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Купить квартиру, дом</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Личные деньги</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Поехать в отпуск</span> </a> </li> <li class="table_item"> <a class="basic_element" href="#"> <span class="sp1 pic"></span> <span class="subheading">Найти врача</span> </a> </li> <li class="table_item"> </li> <li class="table_item"> </li> <li class="table_item"> </li> </ul> </div> <div class="clear"></div> <!--Подвал сайта--> <div id="footer"> </div></div>body { /* background-image: url(../img/bg.png)*/ background-color: #FFFFFF;}#main_menu_high {width: 950px;height: 50px;margin: 40px auto 20px auto;padding: 0px;background-image: url(../img/menu_bar.jpg);} #main_menu_high ul {list-style: none;margin: 20px 40px;padding: 0;} #main_menu_high ul li a {height: 30px;display: block;float: left;color: #3e1c15;text-decoration: none;font-family: Arial,sans-serif;font-size: 12px;font-weight: bold;padding: 17px 15px 0 15px;}#main_menu_low { margin: 5px auto 20px auto; padding: 0px; width: 950px; height: 50px;}#main_menu_low ul { list-style: none; margin: 5px 40px; padding: 0;}#main_menu_low ul li a { height: 30px; display: block; float: left; color: #3e1c15; text-decoration: none; font-family: Arial,sans-serif; font-size: 12px; font-weight: bold; padding: 17px 15px 0 15px;}#main_menu_high ul li a:hover {color: #3c57af;}#wrapper{ width: 1000px; outline: 2px solid #cccccc; padding: 10px; margin: 0 auto;}#header { height: 200px; /*background-color: #F8AC18;*/ margin-bottom: 12px;}#sidebar_left { width: 180px; /*border: #A6A6A6 solid 1px; */ margin-bottom: 12px; float: left;}#sidebar_right { width: 180px; /*height: 200px;*/ background-color: #EBEBEB; margin-bottom: 12px; float:right;}#central { /*height: 200px;*/ width: 630px; background-color: #FFF; margin: -10px auto 12px auto; padding-top: 10px; position: relative; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left;}#footer { width: 1000px; height: 100px; background-color: #F8AC18; margin: 0 auto;}.clear{ clear: both;}Всем заранее спасибо!
  2. Доброго времени суток всем! Есть горизонтальное меню с выпадающими списками подменю. Выпадает всё здорово, но подсвечивается несколько не так, как хотелось бы. Чего хочу, и что не получилось: когда наводится мышь на пункт меню - всё здорово, пункт подсвечивается оранжевым, меню выпадает, но после того, как мышь уходит с основного пункта меню и начинает "гулять" по подменю, подсветка с основного пункта меню пропадает, а должна оставаться. когда на ней hover - она загорается, hover пропал - пропала подсветка. как заставить светиться этот пункт, пока я шарю мышкой в пределах его подменю? пример в картинках вот так оно есть сейчас: вот так надо (монтаж): вот кусок кода элемента меню, из которого выпадает подменю: <ul class="menu"> /*top menu*/ <li class="item-101 current active deeper parent"> <a href="/" >О компании</a> /*drop-down menu*/ <ul> <li class="item-114"> <a href="/home/history" >История компании</a> </li> <li class="item-115"> <a href="/home/partners" >Наши партнёры</a> </li> <li class="item-116"> <a href="/home/suppliers" >Наши поставщики</a> </li> </ul> </li></ul>вот стиль для меню: ul.menu { margin: 0; padding: 0; width: 100%; height: 100%; text-align: justify;}ul.menu li { float: left; list-style: none; position: relative; display: inline-block;}ul.menu li.active { background-color: #f93; text-shadow: 1px -1px 0px #000;}ul.menu li a { color: #fff; display: block; padding: 8px 12px 10px; text-decoration: none;}ul.menu li a:hover { background-color: #f93; text-shadow: 1px -1px 0px #000;}/* drop-down menu */ul.menu li ul { display: none;}ul.menu li:hover ul { display: block; position: absolute; top: 38px; background-color: #f93; z-index: 1000;}ul.menu li:hover ul li { float: none; width: 330px; border-bottom: 1px solid #ff9; text-shadow: 1px -1px 0px #000;}ul.menu li ul li a:hover { background-color: #ff3;}подскажите, что сделать или что изменить, чтобы получилось задуманное, а то уже идеи кончились.. если по поводу моего кода есть куча замечаний, то не стесняйтесь делать замечания, учту!
  3. Помогите пожалуйста сделать выпадающее меню на css, без jq. Спасибо <div id="menu"> <ul><li><a href="#">click me</a></li><ul><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li><li><a href="#">ВЫПАДАЙЮЩИЙ СПИСОК</a></li></ul><li class="standup"><a href="">ССЫЛКА1</a></li><li class="standup"><a href="">ССЫЛКА2</a></li><li class="standup"><a href="">ССЫЛКА3</a></li><li class="standup"><a href="">ССЫЛКА4</a></li></ul></div>
  4. добрый день. недавно, менее 2ух недель я изучаю хтмл и цсс. Решил сделать сай, пробный. пытаюсь сделать у сайта горизонтальную меню, для этого я вставляю [i]display: inline.[/i] и вроде всё гуд, но не то немного. у меня элементы подстраиваются под размер содержимого. как мне сделать так чтобы оно оставалось тем же размером что было?? я уже подумываю каждой кнопке делать отдельный блок где будет прописан своё местоположение. я надеюсь что не криво изложил свою мысль и проблему)) ниже сам код
  5. Съезжает меню

    Добрый вечер! Сделал меню, но при масштабировании последний пункт съезжает. Подскажите, что можно с этим сделать? http://jsfiddle.net/P274Z/embedded/result/
  6. Ребята помогите, ибо уже завязался с этой темой а решить вопрос не могу. Есть сайт, там менюшка состоит из 4 кубов при навидении они вращаются. но это работает только в Firefox и Safari.Помогите. Пример брал отсюда http://pcvector.net/scripts/layout_and_interface/338-effekt-vraschayuschegosya-kuba.html
  7. Добрый день, дорогие эксперты! Помогите пожалуйста,такая ситуация. В Operе и остальных браузерах отображает нормально, а вот в Google Chrome съзжает меню в футере. Скриншоты и код: Нормально: Cсъезжает в Хроме: <div id="footer"> <div class="counter"><!--LiveInternet counter--><!--/LiveInternet--></div> Все права защищены. © <a href="<?php bloginfo('home'); ?>"><strong><?php bloginfo('name'); ?></strong></a> <div class="footerrightmenu"> <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> </div></div>#footer {margin-top: 0;padding: 20px;text-align: center;color: #FFFFFF;font-size: 13px;}#footer a {color: #FFFFFF;} #footer a:hover {text-decoration: none;color: #FFFFFF;} .counter {display: block;float: left;}.footerrightmenu {width: 190px;display: block;float: right;margin-top: -10px;}.footerrightmenu ul li {display: inline;list-style: none;margin-left:2px;}.footerrightmenu ul li a {text-decoration: none;font-size; 13px;}.footerrightmenu ul li a:hover {text-decoration: underline!important;}Помогите пожалуйста, в чем может быть причина? Что не так?
  8. Меню при наведении

    Есть вот такое вот меню: картинка меню По нему 2 вопроса: 1) Как сделать так, чтобы при наведении синий фон был выше самого меню? На данный момент получается только так: http://jsfiddle.net/C82vy/ 2) Второй вопрос по градиенту: такой градиент можно сделаь средствами css? Если можно, то как, потому-что непонятно. Знаю только как задать линейный градиент от одного цвета к другому.
  9. Меню - изображение

    Доброго времени суток, прошу прощение если пишу не туда. Дело состоит в следующем: Сайт делаю в Ucoz Есть изображение машины - хочу сделать из него меню, примерно выглядеть оно должно так - чтобы: при наведении на, к примеру стекло(слово), стрелка и сам текст менял цвет, а при нажатии переходило по ссылке. код в css: .logo{background:#E7E7E7 url('/img/theme/apb/logo.jpg') no-repeat top в html: <div class="nHead"> <div id="logo"> <a href="/"> <img src="/sp.gif" class="logo" alt="Логотип" /> <img src="/sp.gif" class="logoLayer" /> </a> </div></div> используется несколько стилей css, т.е. при смене на другой стиль должна выводиться другая машина с другими ссылками и словами. подскажите пожалуйста как мне это осуществить, заранее благодарен
  10. Реализация меню

    Добрый день. Подскажите, как сделать http://itmages.ru/image/view/1361341/6565d38d такое меню? Интересует граница вверху и внизу по всей ширине содержимого, но при a:hover чтобы исчезала.
  11. Доброго времени суток! Делаю горизонтальное меню с разделителями. Разделители обычный слэш "/" Решил использовать псевдоэлементы для вставки разделителей. Контейнер имеет float и его размеры не известны (резиновый). Естественно расстояние между элементами списка должно "тянуться". По сему решил сделать margin у псевдоэлементов с процентным значением. В итоге наблюдаю, что последний элемент списка переносится из-за недостатка ширины контейнера. Причем видно, что ширина контейнера равна ширине блока без margin у псевдоэлемента. Складывается ощущение, что браузер просто "теряется", ибо не знает откуда взять значения для расчета полей. Замечу, что при "ручном" изменении ширины контейнера проблема пропадает. Собственно вопрос - должен ли браузер при расчете ширины контейнера учитывать поля у псевдоэлементов? Думаю, да. И как это пофиксить? Код с примером в песочнице: http://dabblet.com/gist/7614971
  12. Кнопки меню при нажатии изменяют свой размер и я никак не могу разобраться вот ссылка на пример http://1241254.96.lt/WorkSpace/
  13. Скажите, вот если допустим, есть div шириной 960 пикселей и в нем есть н-количество пунктов меню. Как сделать, что бы левая и правая ссылка были выровнены по левому и правому краю, а те пункты которые между ними, имели одинаковые отступы ?
  14. Меню

    Есть меню нужно что бы при достижении конца окна браузера субменю поворачивалось в другую сторону, а не вылазила за пределы видимой части браузера. http://jsfiddle.net/8HzWp/
  15. Всем доброго времени суток. Выполняя тестовое задание, столкнулся с проблемой. Сделал меню. В условия было указано, что надо использовать только css и html: http://jsfiddle.net/...ebee1993/WxdQp/ Проблема: Перегородка между элементом основного меню и раскрывающимся под ним списком должна отсутствовать. Выслушаю любые предложения. Заранее благодарен
  16. привет всем! была такая задача сверстать такое меню, я его сверстал, элементы подогнал отрицательным margin, все вроде прекрасно, но тут появилась такая проблема как наведении и клике ты попадаешь совсем на другую страницу, по скриншоту очевидно видно, что каждый div имеет свой прямоугольник и тем самым когда я провожу мышкой по нему он активирует ту область, на которой див. <a href="http://www.picshare.ru/view/2204796/" target="_blank"><img src="http://www.picshare.ru/uploads/130610/YH7eB7IFkH_thumb.jpg" border="0" title="Хостинг картинок PicShare.ru"></a> что я хочу этим сказать, есть ли способы, чтобы уменьшить зону ссылки до картинки? или может есть готовые решения такого рода меню с использованием скриптов и прочего. заранее благодарю вас за ответы!
  17. Как сделать такое меню? А точнее плашку при наведении. У меня получается так http://jsfiddle.net/zfQQX/1/ Я понимаю, что где-то пробел в знаниях здесь, или метод впринципе неверен. Подскажите пожалуйста
  18. Меню css+html

    Здравствуйте, необходимо было меню с выпадающими подпунктами, нашел в инете готовое решение, переверстал под свой дизайн, все работает как нужно, одна беда - вылазит подпункты при определенной ширине меню, если ширину увеличить, то все становиться на свои места, однако увеличивать уже некуда, хотелось бы наоборот уменьшить, но тогда вылазит еще больше подпунктов: Лопатил 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> Подскажите пожалуйста как это можно поправить?
  19. Верстка меню

    Как сверстать такое меню используя по максимуму css
  20. Всем Доброго времени суток! У меня возникла проблемка которую надо срочно решить . Вот сверстал пример меню (чтобы вам было понятно наглядно) http://youtime.hol.es/ который будет на сайте При наведении на новости выпадает подменю. Так вот нужно чтобы при фокусе на подменю , цвет ссылки высшего уровня (новости) оставался золотым. Сам додуматься не могу(
  21. Добрый вечер, Разрабатываю сайт, одним из основных требований к которому есть адаптивная верстка. Все довольно просто, но есть проблема - на определенной ширине дисплея нужно превращать меню в кастомизированый dropdown. Напрашивается подключение плагина и мониторинг текущей ширины дисплея через js, но кажется, что это решение "с душком". Подскажите, возможно ли реализовать это более "чисто", и если да, то как? Вот меню, над которым оперирую. С уважением, Михась
  22. Вертикальное меню

    Доброго времени суток! есть такая проблема - в вертикальном меню "аккордеон" все время открыт первый пункт... к огромному сожалению это совсем ни к чему, во всяком случае на всех страницах. Как открыть нужные подпункты там где надо, я уже разобрался, а вот как закрыть этот первый пункт не знаю... облазил все... Как все это дело выглядит можно посмотреть тут: http://perfectionstudio.ru/palve/index.html, если надо напишу сюда все коды..) Буду очень-очень благодарен за помощь!
  23. Здравствуйте уважаемые форумчане! Я не являюсь профессионалом сайтостроения, т.е. о-очень много не знаю. У меня возник такой вопрос. Попробую описать его. Предположим у меня есть блок, который "прижат" к левому краю. При нажатии на данный блок, он должен выдвинуться вправо, "потянув" за собой другой блок. Ну так вот, как это сделать? Подскажите пожалуйста. Вроде понятно. Если нет, буду рад объяснить снова. Прошу простить за косой язык, незнание языков профессиональных и отсутсвие примера (постараюсь найти). Заранее спасибо.
  24. Каталог продукции

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