X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите новичку с горизонтальным меню
jaans
jaans
Topic Starter сообщение 11.12.2010, 21:53; Ответить: jaans
Сообщение #1


Нужно реализовать горизонтальное меню в виде блоков что бы они расположились горизонтально в центре каждого блока есть ссылка фон блоков к примеру коричневый он должен быть сплошным далее при наведении мышкой фон должен меняться снизу вверх на черный а когда мышку уводишь должен меняться сверху вниз на коричневый .У меня проблема встала в том месте если делаю ссылку а коричневом фоне то область текста самой ссылки белая .Подскажите как быть
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
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
bob_hb
сообщение 12.12.2010, 20:18; Ответить: bob_hb
Сообщение #3


Тебе надо изменить фон заголовка чтоли я не понял
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
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
jaans
Topic Starter сообщение 13.12.2010, 21:45; Ответить: jaans
Сообщение #5


Спасибо всем за ответы буду пробовать отпишусь о результате
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jaans
jaans
Topic Starter сообщение 13.12.2010, 22:06; Ответить: jaans
Сообщение #6


Огромное спасибо FightInGlory все работает именно как мне и нужно теперь попытаюсь разобраться с кодом еще раз СПАСИБО
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jaans
jaans
Topic Starter сообщение 13.12.2010, 23:09; Ответить: jaans
Сообщение #7


Сейчас при наведении мышкой идет закрашивание снизу вверх, но приглядевшись повнимательней к образцу меню. Заметил что там при наведении мышкой начинается закрашиваться снизу вверх , окрашивается где то до середины и тут же снизу закрашивание начинает убираться .Получается как бы полоска в 5 пикселов копируется снизу вверх доходит до середины потом вверх она так же копируется а вот снизу полоска начинает исчезать. Получается в виде бегущего огня эффект может кто знает как такое сделать ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 14.12.2010, 2:57; Ответить: FightInGlory
Сообщение #8


Если честно, я прочитал 2 раза но не очень то понял, что куда должно бежать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jaans
jaans
Topic Starter сообщение 14.12.2010, 10:27; Ответить: jaans
Сообщение #9


Нужно сделать бегущую цветную полоску сверху вниз шириной примерно в 50 пикселов как то так

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
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


 



RSS Текстовая версия Сейчас: 29.3.2024, 2:09
Дизайн