Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS меню "дергается" / 17 сообщений из 17, страница 1 из 1
20.06.2012, 16:11:10
    #37846750
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
есть горизонтальное меню с разделителями в виде бордеров:
Код: 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:13:28
    #37846757
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
а если это:oaken
Код: css
1.
2.
3.
4.
.menu li a:hover {
	font-weight:bold;
	color:#4F8F00;
}

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

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

Тестовый пример того меню будет? Или так с бубном и будем плясать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.06.2012, 16:38:13
    #37846833
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
Паганелья бы поигрался с display:block, float:left и и задал бы статический width всем одинаковыйВариант. Только в моем случае не подходить, уж очень большой разброс между длинами пунктов....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.06.2012, 16:38:56
    #37846836
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
krvsaТестовый пример того меню будет? Или так с бубном и будем плясать? чем пример из первого поста не устраивает?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.06.2012, 17:58:04
    #37847036
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
Код: 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, 20:41:21
    #37847229
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
oakenчем пример из первого поста не устраивает?
Это не пример, это огрызок цсса...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.06.2012, 20:44:39
    #37847234
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
Вот у skyANA настоящий тестовый пример.
skyANA , у нас мысли сошлись. Я так же хотел предложить вариант с нечто подобным...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.06.2012, 09:38:07
    #37847646
oaken
oaken
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
skyANA,
Спасибо большое за интересную идею, возьму на вооружение.
К сожалению в данный момент я не смогу ею воспользоваться. Это меню - часть джумловского шаблона, а в этой цмске нельзя задавать текст пункта меню в виде нескольких спанов...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.06.2012, 12:02:11
    #37848109
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
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:23:02
    #37848174
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS меню "дергается"
Действительно, менб в Joomla! - это модуль.
Находите его в папке modules, и смотрите default.php, отвечающий за отображение.
Например: modules/mod_mainmenu/tmpl/default.php.

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

в свой шаблон в папку html вставляешь переделанный шаблон модуля и ниче не херится
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS меню "дергается" / 17 сообщений из 17, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 499ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1449667]:
 0ms
get settings:
 9ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 219ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 47ms
get tp. blocked users:
 1ms
others: 199ms
total:  499ms
x
x
Закрыть


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