ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS меню "дергается"
17 сообщений из 17, страница 1 из 1
CSS меню "дергается"
    #37846750
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
есть горизонтальное меню с разделителями в виде бордеров:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
.menu{
    list-style:none;
    text-align:center;
	margin-top:20px;
	margin-left:-50px;	
}

.menu a {
	text-decoration:none;
}


.menu li {
	font:Arial, Helvetica, sans-serif;
	font-size:14px;
	display: inline !important;	  
	border-left: 2px solid #6F7F95;
	margin-right:8px;	
	padding-left:8px;
}
	
.menu li:first-child {
    border-left: none; 
}
   
.menu li a:hover {
	font-weight:bold;
	color:#4F8F00;
}

.menu li:active{
	font-weight:bold;
	color:#4F8F00;	
}

.menu li.current a {
	font-weight:bold;
	color:#4F8F00;
}


При наведении курсора на пункт меню увеличивается пункт меню и все меню разъезжается в стороны от него. Как избавится от такого эффекта, желательно без js?
...
Рейтинг: 0 / 0
20.06.2012, 16:11:10
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37846757
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
а если это:oaken
Код: css
1.
2.
3.
4.
.menu li a:hover {
	font-weight:bold;
	color:#4F8F00;
}

убрать ?
...
Рейтинг: 0 / 0
20.06.2012, 16:13:28
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37846773
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
Паганельа если это:oaken
Код: css
1.
2.
3.
4.
.menu li a:hover {
	font-weight:bold;
	color:#4F8F00;
}

убрать ?ясно дело, что не будет дергаться, но смысл в том чтобы шрифт становился жирным, но как-бы "воспарял" над меню и не двигал остальные елементы.
...
Рейтинг: 0 / 0
20.06.2012, 16:20:09
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37846792
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
я бы поигрался с display:block, float:left и и задал бы статический width всем одинаковый
...
Рейтинг: 0 / 0
20.06.2012, 16:26:13
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37846815
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
oakenясно дело, что не будет дергаться, но смысл в том чтобы шрифт становился жирным, но как-бы "воспарял" над меню и не двигал остальные елементы.
- Товарищ прапорщик, остановите поезд.
- Поезд, стой! Раз, два...
(с)

Тестовый пример того меню будет? Или так с бубном и будем плясать?
...
Рейтинг: 0 / 0
20.06.2012, 16:35:09
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37846833
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
Паганелья бы поигрался с display:block, float:left и и задал бы статический width всем одинаковыйВариант. Только в моем случае не подходить, уж очень большой разброс между длинами пунктов....
...
Рейтинг: 0 / 0
20.06.2012, 16:38:13
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37846836
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
krvsaТестовый пример того меню будет? Или так с бубном и будем плясать? чем пример из первого поста не устраивает?
...
Рейтинг: 0 / 0
20.06.2012, 16:38:56
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37847036
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
<!DOCTYPE HTML>
<html>
  
  <head>
    <style>      
      .menu {
        list-style:none;
        text-align:center;
        margin-top:20px;
        margin-left:-50px;
      }
      .menu a {
        text-decoration:none;
      }
      .menu li {
        font:Arial, Helvetica, sans-serif;
        font-size:14px;
        display: inline !important;
        border-left: 2px solid #6F7F95;
        margin-right:8px;
        padding-left:8px;
      }
      .menu li:first-child {
        border-left: none;
      }
      
      .menu li a {
        position: relative;
      }
      .menu li a span.bold {        
        color:#4F8F00;
        font-weight:bold;
        visibility:hidden;
      }
      .menu li a span.normal {
        position: absolute;
        left: 0;
        top: 0;
      }
      
      .menu li a:hover span.bold {
        visibility:visible;
      }
      .menu li a:hover span.normal {
        visibility:hidden;
      }
      
      .menu li:active {
        font-weight:bold;
        color:#4F8F00;
      }
      .menu li.current a {
        font-weight:bold;
        color:#4F8F00;
      }
    </style>
  </head>
  
  <body>
    <ul class="menu">
      <li>
        <a href="#">
          <span class="bold">Menu item one</span>
          <span class="normal">Menu item one</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="bold">Menu item two</span>
          <span class="normal">Menu item two</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="bold">Menu item three</span>
          <span class="normal">Menu item three</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="bold">Menu item four</span>
          <span class="normal">Menu item four</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="bold">Menu item five</span>
          <span class="normal">Menu item five</span>
        </a>
      </li>
    </ul>
  </body>

</html>
...
Рейтинг: 0 / 0
20.06.2012, 17:58:04
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37847229
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
oakenчем пример из первого поста не устраивает?
Это не пример, это огрызок цсса...
...
Рейтинг: 0 / 0
20.06.2012, 20:41:21
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37847234
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот у skyANA настоящий тестовый пример.
skyANA , у нас мысли сошлись. Я так же хотел предложить вариант с нечто подобным...
...
Рейтинг: 0 / 0
20.06.2012, 20:44:39
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37847646
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
skyANA,
Спасибо большое за интересную идею, возьму на вооружение.
К сожалению в данный момент я не смогу ею воспользоваться. Это меню - часть джумловского шаблона, а в этой цмске нельзя задавать текст пункта меню в виде нескольких спанов...
...
Рейтинг: 0 / 0
21.06.2012, 09:38:07
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37848109
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
oaken,

Джумловский шаблон меню всегда верстал под любой дизайн. На крайняк переделай под себя шаблон и добавь теги какие нужны.

Вот пример я някидывал кучу всего в LI ))

Код: html
1.
2.
3.
4.
5.
6.
7.
<li class="item-101">
<div class="lileft"></div>
<div class="licenter">
<a href="/news.html">Новости</a>
</div><div class="liright"></div>
<div class="razdel"></div>
</li>
...
Рейтинг: 0 / 0
21.06.2012, 12:02:11
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37848174
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Действительно, менб в Joomla! - это модуль.
Находите его в папке modules, и смотрите default.php, отвечающий за отображение.
Например: modules/mod_mainmenu/tmpl/default.php.

Как-то так. Только копию сделать не забудьте, если встроенный модуль править будете, а то с обновлением Joomla! похерится :)
...
Рейтинг: 0 / 0
21.06.2012, 12:23:02
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37848294
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
SharuPoNemnoguДжумловский шаблон меню всегда верстал под любой дизайн. На крайняк переделай под себя шаблон и добавь теги какие нужны.Хм, надо попробовать, спасибо)
...
Рейтинг: 0 / 0
21.06.2012, 13:09:15
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37848306
oaken
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
oaken
Участник
skyANAДействительно, менб в Joomla! - это модуль.
Находите его в папке modules, и смотрите default.php, отвечающий за отображение.
Например: modules/mod_mainmenu/tmpl/default.php.:)Так и сделаю, буду текст ссылок меню двоить (по Вашему рецепту) прям в шаблоне модуля меню.
skyANAКак-то так. Только копию сделать не забудьте, если встроенный модуль править будете, а то с обновлением Joomla! похерится :)Ничего не похерится, в шаблонах джумлы можно переопределять стандартные шаблоны компонентов/модулей...
...
Рейтинг: 0 / 0
21.06.2012, 13:12:26
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37848346
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Может похерится, если Вы новую версию Joomla! поставите. Хотя если Вы уверены, что нет, то ok :)
...
Рейтинг: 0 / 0
21.06.2012, 13:28:43
| Ответить | Цитировать | Написать  
CSS меню "дергается"
    #37848363
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
skyANA,

в свой шаблон в папку html вставляешь переделанный шаблон модуля и ниче не херится
...
Рейтинг: 0 / 0
21.06.2012, 13:36:18
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS меню "дергается"
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=164&tid=1449667]:
 0ms
get settings:
 10ms
get forum list:
 17ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 55ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 220ms
total:  375ms
созд. / загр.: 375ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]