|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
28.09.2011, 12:58 | #1 |
Пользователь
Регистрация: 22.08.2010
Сообщений: 85
|
Меню codrops (стильное меню), Как сделать чтобы текст не смещался в блоке?
вот менюшка (live-code):http://jsfiddle.net/Stasonix/gPbxC/
на всякий случай вот листинг: html: Код HTML:
<ul id="navigation"> <li class="home"><a href=""><div>Home</div></a></li> <li class="about"><a href=""><div>About</div></a></li> <li class="search"><a href=""><div>Search</div></a></li> <li class="photos"><a href="http://udruga.500mb.net/menu.php" target="_blank"><div>menu jquery</div></a></li> <li class="rssfeed"><a href="http://narod.ru/disk/26054239001/paralax-slider.rar.html"><div>PARALAX</div></a></li> <li class="podcasts"><a href=""><div>Podcasts</div></a></li> <li class="contact"><a href=""><div>Contact</div></a></li> </ul> Код HTML:
/* СТИЛЬНОЕ МЕНЮ CODROPS */ ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0; left: 0; list-style: none; z-index:999999; width:100%; } ul#navigation li { width: 13.9%; display:inline; float:left; height: 100%; margin-left: 0.4%; } ul#navigation li a { display: block; float:left; width: 99%; height: 3%; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align: center; padding-top:85%; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); overflow: hidden; } ul#navigation li a:hover{ background-color: black; /* #CAE3F2 */ } ul#navigation li a div{ letter-spacing:2px; font-size:14px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; font-weight: bold; margin-bottom: 6%; overflow: hidden; } Код HTML:
$(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-79%' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-5%' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-79%' },200); } ); }); В блоке где прописано JQuery при стягивании-расстягивании блока текст перелазит на новую строчку, что значительно портит всю картину, я пробовал overflow:hidden; но оно тут до лампочки, как этого избежать? п.с. сайт заточен под резину, так что менять проценты на px я не могу. |
28.09.2011, 13:03 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Код:
п.с. Я бы использовал таблицу
Alar, верни репу!
|
28.09.2011, 13:17 | #3 |
Пользователь
Регистрация: 22.08.2010
Сообщений: 85
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как сделать, чтобы при двойном клике мышью не вылетало сервис-меню ? | platinum355 | HTML и CSS | 3 | 29.06.2011 09:26 |
Как сделать так, чтобы верхнее меню читалось на русском языке? | net_net | HTML и CSS | 2 | 07.02.2011 16:07 |
TreeView как сделать, чтобы попап-меню выпадало для определенных ветвей? | KWN, lnc | Помощь студентам | 11 | 08.03.2009 01:01 |
TreeView как сделать, чтобы попап-меню выпадало для определенных ветвей? | KWN, lnc | Помощь студентам | 4 | 03.03.2009 17:04 |
Меню с Items в виде набора Bitmap (как меню редактирования в Word'е) | chandrasecar | Мультимедиа в Delphi | 7 | 14.01.2009 09:20 |