Помощник
|
Помогите новичку с горизонтальным меню |
jaans
|
Сообщение
#1
|
||
|
|
||
|
|||
vasvas7775 |
11.12.2010, 23:35;
Ответить: vasvas7775
Сообщение
#2
|
|
Я много что не понял, из горизонтального могу предложить это:
<style type="text/css">
<!-- body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } img { border: none; } /*- Menu Tabs 8--------------------------- */ #tabs8 { float:left; width:100%; font-size:93%; line-height:normal; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url("tableft8.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url("tabright8.gif") no-repeat right top #996633; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#FFFFFF; background-color:#333333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } --> </style> </head> <body> <div id="tabs8"> <ul> <!-- CSS Tabs --> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Support</span></a></li> <li id="current"><a href="#"><span>Order</span></a></li> <li><a href="#"><span>News</span></a></li> <li><a href="#"><span>About</span></a></li> </ul> </div> </body> </html> |
|
|
bob_hb |
12.12.2010, 20:18;
Ответить: bob_hb
Сообщение
#3
|
|
Тебе надо изменить фон заголовка чтоли я не понял
|
|
|
FightInGlory |
13.12.2010, 16:47;
Ответить: FightInGlory
Сообщение
#4
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="jquery.js" type="text/javascript"></script> <style type="text/css"> *{ padding:0; margin:0; } .menu{ margin:100px; overflow:hidden; } a{ cursor:pointer; display:block; padding:0 10px; height:30px; line-height:30px; margin-right:5px; float:left; position:relative; z-index:0; background:#492d05; color:#fff; } span{ position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background:#000; } </style> <script type="text/javascript"> $(document).ready(function(){ $('a').hover( function(){ $(this).find('span').stop(true, true).slideToggle(300); }, function(){ $(this).find('span').stop(true, true).slideToggle(300); }); }); </script> </head> <body> <div class="menu"> <a> Пункт1 <span class="asd"></span> </a> <a> Пункт2 <span class="asd"></span> </a> </a> <a> Пункт3 <span></span> </a> <a> Пункт4 <span></span> </a> <a> Пункт5 <span></span> </a> </div> </body> </html> Чтобы все заработало подключите jquery и попробуйте, есть что-то не так пишите. |
|
|
jaans
|
Сообщение
#5
|
|
Спасибо всем за ответы буду пробовать отпишусь о результате
|
|
|
jaans
|
Сообщение
#6
|
|
Огромное спасибо FightInGlory все работает именно как мне и нужно теперь попытаюсь разобраться с кодом еще раз СПАСИБО
|
|
|
jaans
|
Сообщение
#7
|
|
Сейчас при наведении мышкой идет закрашивание снизу вверх, но приглядевшись повнимательней к образцу меню. Заметил что там при наведении мышкой начинается закрашиваться снизу вверх , окрашивается где то до середины и тут же снизу закрашивание начинает убираться .Получается как бы полоска в 5 пикселов копируется снизу вверх доходит до середины потом вверх она так же копируется а вот снизу полоска начинает исчезать. Получается в виде бегущего огня эффект может кто знает как такое сделать ?
|
|
|
FightInGlory |
14.12.2010, 2:57;
Ответить: FightInGlory
Сообщение
#8
|
|
Если честно, я прочитал 2 раза но не очень то понял, что куда должно бежать.
|
|
|
jaans
|
Сообщение
#9
|
|
|
Нужно сделать бегущую цветную полоску сверху вниз шириной примерно в 50 пикселов как то так
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Помогите вспомнить рекламного бота Телеграм для обмена рекламой | 0 | Mixatraider | 692 | 21.2.2024, 23:42 автор: Mixatraider |
|
Помогите рещить проблему с монитором. Почему низкое разрешение при подключении монитора через displayport? |
0 | Levels | 1695 | 11.12.2020, 0:48 автор: Levels |
|
Помогите кто нибудь получить партнерку Росбанк! | 7 | heisenberg_mw | 2315 | 7.8.2020, 9:28 автор: heisenberg_mw |
|
Помогите найти тему пожалуйста | 7 | virtas | 12402 | 24.7.2020, 17:02 автор: -JamesSmips- |
|
Помогите с поиском доноров | 3 | tehno_music | 3332 | 4.11.2019, 17:15 автор: goblin78 |
Текстовая версия | Сейчас: 29.3.2024, 2:09 |