Search the Community
Showing results for tags 'меню'.
-
Всем привет, друзья подскажите, как быть в такой ситуации ? Проблема с отображением меню на сайте, кто может подсказать, как исправить ?
-
Всем привет! У меня такая проблема: не могу отформатировать горизонтальное меню. Пример можете посмотреть здесь http://testshop.mcdir.ru/ Скачал его на rudebox но у меня оно почему то не работает. помогите, плиз!!!
-
Помогите сделать на css. Может кто статейку с подобным заданием скинет, буду благодарен.
-
Подскажите как реализовать вот такое вот меню навигации (http://moscow.auto.ru/) поиск категорий.
-
Нужно сверстать такое меню: При наведении на ссылку отображаются все под меню, притом то подменю, что лежит в ссылке на которую навели, выделяется так как на картинке. Блок, в котором лежат все подменю растягивается на высоту самого длинного списка. блок с подменюшками полупрозрачный, с тенью. юзать можно только css. таблицей делать не пойдет, ибо будет все адаптивно. задать какую-то одну высоту подменюшкам не пойдет ибо в меню неопределенное количество ссылок. В общем вот задача, фиг кто ее сделает) структура меню стандартная <ul><li><a></a><ul>...</ul></li></ul>
-
Очень-очень нужна помощь. В примере "Фиксированная ширина, навигация слева" (на этом же сайте) Если расположить пункты меню слева в желтом поле, можно ли сделать ссылки так, что б они открывались в правом синем поле, не перегружая левое? Или слева открывался файл menu.html с пунктами меню, а справа содержимое ссылки например str1.html и т.д. Если да, то как? (я подумал о фреймах сразу, но теги body и frame оказались не очень совместимы как -то?! Люди добрые, поможите, чем можете, если можете. Имеется ввиду, без использования какого либо движка вообще, типа Джомла и т.п. И вообще без веб сервера, просто странички на своем компьютере т.е. в офлайне, точнее для CD диска менюшка. Для создания одного, единого меню, а справа открывались страницы содержимого. (проблема в том, что тут кабэ движка никакого нет, и никакие чанки, снипеты и т.п. не работает. Я в панике, а страниц много получается и меняются они периодически, и переделывать потом каждый раз меню на каждой страничке, если что то добавится/удалится, жуть как не хочется.) Ну или ткните туда, где подобная тема уже рассматривалась, но лучше не ругайтесь, а просто помогите!!! PS может, какую, яву присоветуете?
-
Имеется меню CSS, есть разделители вертикальные, но они никак не хотят отображаться как надо.
-
Здравствуйте. Прошу помочь бездарности. Нужно, чтобы при наведении вываливалось меню и фон родителя оставался неизменным, когда юзер будет водить курсором по выпадающему меню. Примерно это должно быть вот так http://joxi.ru/6WQfU_3JTJBXFcsaglQ Оранжевое - это hover. Но у меня такая беда http://joxi.ru/KmUfUxjKTJCPTRw_8zk Понимаете, о чём я? Подскажите, что я не учла? Очень интересно, самоё не получилось разобраться. Спасибо, джедаи.
-
Здравствуйте. Я только начинаю постигать искусство верстки, и делаю свою первую страницу в портфолио. Вот страница У нее существует меню, но когда я начинаю уменьшать масштаб страницы, пункты меню начинают сползать: При дальнейшем уменьшении масштаба вся верстка, просто съезжает: Прошу, помогите решить проблему, ибо на других сайтах такого нет. Прилагаю 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;}Всем заранее спасибо!
-
Доброго времени суток всем! Есть горизонтальное меню с выпадающими списками подменю. Выпадает всё здорово, но подсвечивается несколько не так, как хотелось бы. Чего хочу, и что не получилось: когда наводится мышь на пункт меню - всё здорово, пункт подсвечивается оранжевым, меню выпадает, но после того, как мышь уходит с основного пункта меню и начинает "гулять" по подменю, подсветка с основного пункта меню пропадает, а должна оставаться. когда на ней 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;}подскажите, что сделать или что изменить, чтобы получилось задуманное, а то уже идеи кончились.. если по поводу моего кода есть куча замечаний, то не стесняйтесь делать замечания, учту!
-
Помогите пожалуйста сделать выпадающее меню на 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>
-
добрый день. недавно, менее 2ух недель я изучаю хтмл и цсс. Решил сделать сай, пробный. пытаюсь сделать у сайта горизонтальную меню, для этого я вставляю [i]display: inline.[/i] и вроде всё гуд, но не то немного. у меня элементы подстраиваются под размер содержимого. как мне сделать так чтобы оно оставалось тем же размером что было?? я уже подумываю каждой кнопке делать отдельный блок где будет прописан своё местоположение. я надеюсь что не криво изложил свою мысль и проблему)) ниже сам код
-
Добрый вечер! Сделал меню, но при масштабировании последний пункт съезжает. Подскажите, что можно с этим сделать? http://jsfiddle.net/P274Z/embedded/result/
-
Ребята помогите, ибо уже завязался с этой темой а решить вопрос не могу. Есть сайт, там менюшка состоит из 4 кубов при навидении они вращаются. но это работает только в Firefox и Safari.Помогите. Пример брал отсюда http://pcvector.net/scripts/layout_and_interface/338-effekt-vraschayuschegosya-kuba.html
-
Добрый день, дорогие эксперты! Помогите пожалуйста,такая ситуация. В 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;}Помогите пожалуйста, в чем может быть причина? Что не так?
-
Есть вот такое вот меню: картинка меню По нему 2 вопроса: 1) Как сделать так, чтобы при наведении синий фон был выше самого меню? На данный момент получается только так: http://jsfiddle.net/C82vy/ 2) Второй вопрос по градиенту: такой градиент можно сделаь средствами css? Если можно, то как, потому-что непонятно. Знаю только как задать линейный градиент от одного цвета к другому.
-
Доброго времени суток, прошу прощение если пишу не туда. Дело состоит в следующем: Сайт делаю в 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, т.е. при смене на другой стиль должна выводиться другая машина с другими ссылками и словами. подскажите пожалуйста как мне это осуществить, заранее благодарен
-
Добрый день. Подскажите, как сделать http://itmages.ru/image/view/1361341/6565d38d такое меню? Интересует граница вверху и внизу по всей ширине содержимого, но при a:hover чтобы исчезала.
-
Доброго времени суток! Делаю горизонтальное меню с разделителями. Разделители обычный слэш "/" Решил использовать псевдоэлементы для вставки разделителей. Контейнер имеет float и его размеры не известны (резиновый). Естественно расстояние между элементами списка должно "тянуться". По сему решил сделать margin у псевдоэлементов с процентным значением. В итоге наблюдаю, что последний элемент списка переносится из-за недостатка ширины контейнера. Причем видно, что ширина контейнера равна ширине блока без margin у псевдоэлемента. Складывается ощущение, что браузер просто "теряется", ибо не знает откуда взять значения для расчета полей. Замечу, что при "ручном" изменении ширины контейнера проблема пропадает. Собственно вопрос - должен ли браузер при расчете ширины контейнера учитывать поля у псевдоэлементов? Думаю, да. И как это пофиксить? Код с примером в песочнице: http://dabblet.com/gist/7614971
-
Кнопки меню при нажатии изменяют свой размер и я никак не могу разобраться вот ссылка на пример http://1241254.96.lt/WorkSpace/
-
Скажите, вот если допустим, есть div шириной 960 пикселей и в нем есть н-количество пунктов меню. Как сделать, что бы левая и правая ссылка были выровнены по левому и правому краю, а те пункты которые между ними, имели одинаковые отступы ?
-
Есть меню нужно что бы при достижении конца окна браузера субменю поворачивалось в другую сторону, а не вылазила за пределы видимой части браузера. http://jsfiddle.net/8HzWp/
-
Всем доброго времени суток. Выполняя тестовое задание, столкнулся с проблемой. Сделал меню. В условия было указано, что надо использовать только css и html: http://jsfiddle.net/...ebee1993/WxdQp/ Проблема: Перегородка между элементом основного меню и раскрывающимся под ним списком должна отсутствовать. Выслушаю любые предложения. Заранее благодарен
-
привет всем! была такая задача сверстать такое меню, я его сверстал, элементы подогнал отрицательным 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> что я хочу этим сказать, есть ли способы, чтобы уменьшить зону ссылки до картинки? или может есть готовые решения такого рода меню с использованием скриптов и прочего. заранее благодарю вас за ответы!
