Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
1

Корректировка меню (CSS)

25.05.2015, 11:48. Показов 687. Ответов 16
Метки нет (Все метки)

Проблема такая, менюшка когда браузер в полноэкранном режиме, все хорошо.
когда сворачиваешь браузер, получается вот так(2 скрин)
помогите оптимизировать под всех. а то страшно представить, что видят те у кого диагональ экрана меньше.

Код
/* Menus */
nav {
 padding: 0;
 margin-bottom: 7px;
 text-align: center;
 background: #fff;
 }


nav ul.uMenuRoot {
 list-style: none outside none;
 margin: 0 auto;
 padding: 0;
 }
nav ul ul {
 background: none repeat scroll 0 0 #f5f5f5;
 left: -1px;
 opacity: 0;
 position: absolute;
 top: 100%;
 transition: all 0.2s ease-out 0.15s;
 visibility: hidden;
 white-space: nowrap;
 z-index: 1;
 text-align: left;
 }
 nav > ul > ul {border-left: 1px solid #d74e37;}
nav ul ul ul {
 left: 100%;
 padding-left: 1px;
 top: 0;
}
nav ul.uMenuRoot > li {
 list-style: none; 
 display: inline-block; 
 margin: 0; 
 padding: 0;
 position: relative;
 border-left: 1px solid #e3e3e3;
 }
 nav ul.uMenuRoot > li:first-child {border: none;}
 nav ul.uMenuRoot > li:last-child {border-right: 1px solid #e3e3e3;}
 
nav ul.uMenuRoot > li.has-submenu:hover {border-left: 1px solid #d74e37;}
nav ul.uMenuRoot > li > ul {border-left: 1px solid #d74e37;}
nav li {
 float: left;
 list-style: none outside none !important;
 position: relative;
 
}

nav li.has-submenu > a:after {
 content: "+";
 display: block;
 position: absolute;
 right: 5px;
 top: 0;
 
}

nav li a:hover + ul {
 opacity: 1;
 visibility: visible;
}

nav li:hover > ul {
 opacity: 1;
 visibility: visible;
}
nav li li {float: none;}

nav li li a {padding: 0 20px; display: block; line-height: 40px; text-decoration: none; color: #555;}
nav li li:hover {background: #f5f5f5;}
nav li li:hover > a, nav li li:hover a:hover {background: #e3e3e3; color: #000; text-decoration: none;}
/* ----- */

/* Site Menus */
это участок css отвечающий за горизонтальное меню.
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Корректировка меню (CSS)   Корректировка меню (CSS)  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.05.2015, 11:48
Ответы с готовыми решениями:

Корректировка кода меню
Верстаю шаблон для joomla все шло хорошо начал вставлять позиции стало плохо вот в чем беда...

Корректировка оператора scanf, а точнее корректировка индексов
Я пытаюсь написать программу которая меняет индексы в операторе scanf на правильные индексы. То...

Написал сам с помощью html и css меню для joomla - активное меню не подсвечивается
Здравствуйте, написал сам с помощью html и css меню для joomla, когда перехожу на страницу...

Меню CSS
Беда! При наведении на кнопку вниз выезжает картинка, но Кнопки убегают вниз вместе с выделенной...

16
Заблокирован
25.05.2015, 12:02 2
Гугли медиа-запросы CSS =)
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
25.05.2015, 12:13  [ТС] 3
Искал, не нашел. поэтому и написал здесь.
А ответь гугли, может каждый
0
5 / 5 / 6
Регистрация: 24.05.2015
Сообщений: 76
25.05.2015, 15:13 4
кинь ссылку, хочу увидеть
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
25.05.2015, 17:50  [ТС] 5
А разве можно ссылку в тему кидать?
0
5 / 5 / 6
Регистрация: 24.05.2015
Сообщений: 76
25.05.2015, 18:02 6
можна
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
25.05.2015, 18:24  [ТС] 7
http://autorazbor112.ru/
0
5 / 5 / 6
Регистрация: 24.05.2015
Сообщений: 76
25.05.2015, 18:31 8
как говорили раньше, нужны @midea запросы, другого выходу не вижу..

Добавлено через 2 минуты
либо задать li width:%..
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
25.05.2015, 18:32  [ТС] 9
Ну вот, я и прошу помочь. потому что я не силен в css
0
5 / 5 / 6
Регистрация: 24.05.2015
Сообщений: 76
25.05.2015, 18:33 10
@media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
//классы
}
и т.д..
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
25.05.2015, 18:34  [ТС] 11
в какой участок css вставлять то что вы скинули?
0
5 / 5 / 6
Регистрация: 24.05.2015
Сообщений: 76
25.05.2015, 18:35 12
вниз, в самый низ, а лучше новый файл подключи под style.css
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
25.05.2015, 18:51  [ТС] 13
@media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
//классы
}
это полный код, или что-то добавить нужно?

Добавлено через 15 минут
потому что то что вы привели. пока не работает
0
5 / 5 / 6
Регистрация: 24.05.2015
Сообщений: 76
25.05.2015, 22:49 14
@media (max-width: 930px) and (min-width: 470px) {
сюда пихай классы которые нужно изменить, они будут работать при разрешении экрана от 470-930..
например так:
nav ul.uMenuRoot > li {color:red;}
}
@media (max-width: 1366px) and (min-width: 1280px) {
nav ul.uMenuRoot > li {color:red;}
}
@media (max-width: 1440px) and (min-width: 1367px) {
nav ul.uMenuRoot > li {color:yellow;}
}
и т.д., тебе нужно прочуствовать эти @media запросы..
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
27.05.2015, 01:09  [ТС] 15
я же говорю, что ничего в этом не понимаю.

Добавлено через 1 минуту
не сочтите за наглость, мне бы уже готовое решение
0
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
27.05.2015, 01:59  [ТС] 16
Конечно у меня получилось щас добиться нужного результата.
Но теперь наоборот, пустует место в развернутом режиме.
0
Миниатюры
Корректировка меню (CSS)  
0 / 0 / 0
Регистрация: 23.05.2015
Сообщений: 18
27.05.2015, 02:27  [ТС] 17
Нужно как-то все это дело зафиксировать, так как раньше была проблема с маленьким разрешением экрана.
Сейчас теоритически должна быть проблема с большим экраном. чем больше экран, тем больше пустота.

Добавлено через 5 минут
Ну или хотябы сместить меню к центру. теоритически должно подойти.
где это можно поправить в css ?

Добавлено через 16 минут
вопрос решен. фиксацией размера страницы, теперь в глаза хоть не бросается.
и страница стала отзываться намного шустрее.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.05.2015, 02:27

Помощь в написании контрольных, курсовых и дипломных работ здесь.

CSS - Меню
Код меню HTML: <div id='menu'><a href='/'>Главная - Новости</a> <a href='/'>Главная -...

css меню
Вопрос: к примеру есть меню ,любое,не имеет значения,и есть к примеры верху 2 кнопки(к примеру...

Меню CSS
Вот сайт - http://bliss.in.ua/gallery-fabric-1.html Там есть сбоку меню. При выборе AMADEO SANDRA,...

Меню на CSS
Делаю меню: <style> .gphoto-topnav-tab{float:left;} .gphoto-notch i,.gphoto-notch...

Меню на CSS
Вот тут проблема: https://www.cyberforum.ru/evaluate-site/thread1771931.html Пробую меню через CSS...

Меню на CSS
Добрый Всем день. Вообщем есть такой кусок html кода: <DIV class="menu"> <DIV...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.