Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Модератор форума: z-17, Anarki  
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Горизонтальное выпадающее меню без скриптов, на одном css!
Горизонтальное выпадающее меню без скриптов, на одном css!
MeowДата: Среда, 22.09.2010, 21:52 | Сообщение # 1
Рядовой
Сообщений: 739
Репутация: 69
Социальная репутация:

Статус: Оффлайн
Создают много одинаковых тем, где просят найти подобное меню, с выпадающими подпунктами. Сама долго искала в интернете, меню без лишних заморочек, которое может редактировать человек не понимающий ничего скриптах. На них руки у меня кривые, редко получалось нормально устанавливать скрипты, библеотеки и прочую мутатень.

Это простое в редактировании и установке горизонтальное выпадющее меню на одних стилях. Стиль подредактирован мной
Это пихаем в код страницы

Code
<div class="menu">
   <ul>   
<li><a class="hide">Главный пункт</a>
   <ul>
   <li><a href="" title="">Подпункт</a></li>
   <li><a href="" title="">Подпункт</a></li>
   </ul></li>
<li><a class="hide">Главный пункт</a>
   <ul>
   <li><a href="" title="">Подпункт</a></li>
   <li><a href="" title="">Подпункт</a></li>
   </ul></li>
</ul>   
</div>

Это в стили
Code
.menu{background:url('/images/menu_bar.png')repeat-x;font-family:Times New Roman;width:970px;height:30px;position:relative;z-index:100;}
.menu ul li a, .menu ul li a:visited{display:block;text-decoration:none;color:#fff;width:100%;margin-left:15px;margin-right:15px;height:30px;text-align:center;color:#fff;line-height:30px;font-size:16px;overflow:hidden}
.menu ul{padding:0;margin:0;list-style:none;}
.menu ul li{float:left;position:relative;}
.menu ul li ul{display:none;font-size:11px;}
.menu ul li:hover a{color:#fff;background:#000000;}
.menu ul li:hover ul{display:block;position:absolute;left:0;width:105px;font-family:arial;font-size:13px;width:135px;}
.menu ul li:hover ul li a{display:block;background:#000;color:#a2a2a2;font-size:13px;width:135px;margin:1px;height:22px;line-height:22px;text-align:left;padding-left:10px;}
.menu ul li:hover ul li a:hover{border:1px solid #ff0000;margin:0px; color:#a2a2a2;font-size:13px;width:135px;}

.left_column {margin:0;float:left;width:265px;text-align:left;}
.right_column {margin:0;float:right;width:685px;text-align:left;padding:10px;}

Пимер можно посмотреть у меня на сайте ) Пример
Прошу не задавать вопросы по поводу дизайна, хотите подогнать под свой диз - учебник в руки и сами переделываем.
Как установить кнопки социальных сетей?

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов
 
z-17Дата: Среда, 22.09.2010, 21:59 | Сообщение # 2
Генералиссимус
Сообщений: 2233
Репутация: 117
Социальная репутация:

Статус: Оффлайн
очень даже красивое меню
мой блог
мои услуги в системе uCoz
все вопросы пишите на форуме, а не в ЛС. Так вам быстрее ответят.
 
MeowДата: Среда, 22.09.2010, 22:03 | Сообщение # 3
Рядовой
Сообщений: 739
Репутация: 69
Социальная репутация:

Статус: Оффлайн
FolloyAngel, я его для сайта делала последним делом на сайте, щас он вообще временно брощен
 
z-17Дата: Пятница, 22.10.2010, 23:34 | Сообщение # 4
Генералиссимус
Сообщений: 2233
Репутация: 117
Социальная репутация:

Статус: Оффлайн
по какой-то неизвестной причине не хочет ставиться меню
ну стили естественно кидаю в css
а меню кидаю в новую строку в таблице, в верхней часте сайта
вот код:
Quote (код верхней части сайта)
<table cellpadding="10" cellspacing="0" border="0" class="dataBar" align="center">
<tr>
<td align="center"><a href="$HOME_PAGE_LINK$" title="Главная"><!--<s5176>-->Главная<!--</s>--></a><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$" title="Мой профиль"><!--<s5214>-->Мой профиль<!--</s>--></a><?else?> | <a href="$REGISTER_LINK$" title="Регистрация"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Выход"><!--<s5164>-->Выход<!--</s>--></a><?else?> | <a href="$LOGIN_LINK$" title="Вход"><!--<s3087>-->Вход<!--</s>--></a><?endif?> <?if($RSS_LINK$)?> | <a href="$RSS_LINK$" title="RSS">RSS</a><?endif?> | <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?>Вы вошли как <a href="$PERSONAL_PAGE_LINK$" title="Мой профиль"><b>$USERNAME$</b></a> | Группа "<u>$USER_GROUP$</u>"<?else?>Приветствую Вас <b>$USERNAME$</b><?endif?><?endif?></td>
</tr>
</table>
<table cellpadding="30" cellspacing="0" border="0" id="logoBar" align="center">
<tr><td>
</td>
<td width="255" style="padding-right:30px">
<center>
<DIV align=center><embed src="http://www.clocklink.com/clocks/5010-red.swf?TimeZone=GMT0300&" width="111" height="33" wmode="transparent" type="application/x-shockwave-flash">
<BR>
<BR>

<?if($USER_LOGGED_IN$)?>
<DIV><SCRIPT LANGUAGE="JavaScript">
currentTime = new Date();
if (currentTime.getHours() >= 4 && currentTime.getHours() <= 5 )
document.write("О ты рано..., ");
if (currentTime.getHours() >= 6 && currentTime.getHours() <= 11 )
document.write("Доброе утро, ");
if (currentTime.getHours() >= 12 && currentTime.getHours() <= 17 )
document.write("Добрый день, ");
if (currentTime.getHours() >= 18 && currentTime.getHours() <= 23)
document.write("Добрый вечер, ");
if (currentTime.getHours() >= 0 && currentTime.getHours() <= 3)
document.write("Ты сегодня поздновато... ");

</SCRIPT><STRONG>$USERNAME$</STRONG></DIV>
<DIV>Ты на сайте: <STRONG>$USER_REG_DAYS$</STRONG>-й день</DIV>
<DIV>Личных сообщений:<STRONG> $UNREAD_PM$</STRONG></DIV>
<DIV>
<A title="Мой профиль" href="$PERSONAL_PAGE_LINK$"><STRONG><IMG alt="" src="http://www.game-team.ru/forscript/lich.png" border=0></STRONG></A><STRONG> <?if($USER_LOGGED_IN$)?></STRONG><A class=fNavLink id=upml href="java script://" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350'); return false;"><STRONG><IMG alt="" src="http://www.game-team.ru/forscript/ls.png" border=0></STRONG></A><STRONG> <?if($IS_NEW_PM$)?><script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('upml','')",500)</script><BGSOUND balance=0 src="http://src.ucoz.net/img/fr/pm.wav" volume=0><?endif?><?endif?></STRONG><A href="$LOGOUT_LINK$"><IMG alt="" src="http://www.game-team.ru/forscript/vixod.png" border=0></A></DIV></SCRIPT><?endif?><?if($USER_LOGGED_IN$)?>
<?else?><a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> | <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?>
</td>
</tr>
<tr>
<td align="center">
<div class="menu">
<ul>
<li><a class="hide">Главная</a>
<ul>
<li><a href="" title="">Подпункт</a></li>
<li><a href="" title="">Подпункт</a></li>
</ul></li>
<li><a class="hide">Главный пункт</a>
<ul>
<li><a href="" title="">Подпункт</a></li>
<li><a href="" title="">Подпункт</a></li>
</ul></li>
</ul>
</div>

</td>
</tr>
</table>


мой блог
мои услуги в системе uCoz
все вопросы пишите на форуме, а не в ЛС. Так вам быстрее ответят.
 
z-17Дата: Пятница, 22.10.2010, 23:35 | Сообщение # 5
Генералиссимус
Сообщений: 2233
Репутация: 117
Социальная репутация:

Статус: Оффлайн
добавил в таблицу только то, что оранжевого цвета.
плиз подскажите в чём я ошибся

мой блог
мои услуги в системе uCoz
все вопросы пишите на форуме, а не в ЛС. Так вам быстрее ответят.


Сообщение отредактировал FolloyAngel - Пятница, 22.10.2010, 23:36
 
z-17Дата: Суббота, 23.10.2010, 15:43 | Сообщение # 6
Генералиссимус
Сообщений: 2233
Репутация: 117
Социальная репутация:

Статус: Оффлайн
всё, поставил, но не в таблицу, а просто в конец кода, по центру разместив.
теперь буду долбать код

мой блог
мои услуги в системе uCoz
все вопросы пишите на форуме, а не в ЛС. Так вам быстрее ответят.
 
funeralismaticДата: Суббота, 23.10.2010, 16:27 | Сообщение # 7
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
Pers_Spiku, у тебя если между пунктами попадает активный объект страницы меню сворачивается. попасть на нижние строки не реально.
Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
EstennyДата: Суббота, 23.10.2010, 20:15 | Сообщение # 8
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Оффлайн
-reQuiem-, угу. Это минус меню на ЦСС.
 
funeralismaticДата: Суббота, 23.10.2010, 20:52 | Сообщение # 9
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
скажите мне, можно сделать без просветов между выпадающими пунктами?
Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
SleepWalkerДата: Суббота, 23.10.2010, 23:34 | Сообщение # 10
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
либо убрать бордер(в наведеном состоянии) и поставить маргин 0(в ненаведенном состоянии, тоесть это и уберет отступы)
Code
.menu ul li:hover ul li a{display:block;background:#000;color:#a2a2a2;font-size:13px;width:135px;margin:0px;height:22px;line-height:22px;text-align:left;padding-left:10px;}  
.menu ul li:hover ul li a:hover{color:#a2a2a2;font-size:13px;width:135px;}

либо убрать маргин и поставить бордер такого же цвета как и фон (в ненаведенном состоянии, а в наведенном состоянии останеться старый бордер)
Code
.menu ul li:hover ul li a{display:block;background:#000;color:#a2a2a2;font-size:13px;width:135px;border:1px solid #000;height:22px;line-height:22px;text-align:left;padding-left:10px;}  
.menu ul li:hover ul li a:hover{border:1px solid #ff0000;margin:0px; color:#a2a2a2;font-size:13px;width:135px;}

Time Waits For No One
 
JesseДата: Четверг, 11.11.2010, 23:13 | Сообщение # 11
Зайчик
Сообщений: 2132
Репутация: 111
Социальная репутация:

Статус: Оффлайн
-reQuiem-, или используй js меню.
На вопросы в ЛС все равно не отвечаю, так что, пожалуйста, не тратьте ни своего ни моего времени.
 
EstennyДата: Четверг, 11.11.2010, 23:48 | Сообщение # 12
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Оффлайн
Jesse, что намного лучше, но его еще написать надо sad
 
funeralismaticДата: Понедельник, 29.11.2010, 00:59 | Сообщение # 13
BANNHAMMER
Сообщений: 3249
Репутация: 237
Социальная репутация:

Статус: Hidden
Jesse, суть в том, что js грузит довольно сильно, и не удовлетворяет моих взысканий, а с css я пока справляюсь.
Dr_KoshMarov, я хотел менюшку как тут, но она так напрягает мой модем, что одна только шапка грузится до пяти минут, и только потом начинает грузить оставшуюся страницу, что сильно разрушает мою нервную систему...

Правила форума :: Заработок для ВСЕХ
Это моё последнее предупреждение.
 
baksyaДата: Вторник, 21.12.2010, 20:56 | Сообщение # 14
Лейтенант
Сообщений: 42
Репутация: 6
Социальная репутация:

Статус: Оффлайн
Pers_Spiku, у меня отображается только вертикально. в чём может быть причина?
 
EstennyДата: Вторник, 21.12.2010, 21:57 | Сообщение # 15
Злой Принц
Сообщений: 3005
Репутация: 120
Социальная репутация:

Статус: Оффлайн
baksya, в коде HTML
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Горизонтальное выпадающее меню без скриптов, на одном css!
  • Страница 1 из 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • »
Поиск: