Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

реализация плавающего меню, как?

Обсуждение темы реализация плавающего меню, как? в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; наткнулся на такое вот меню http://www.mysexcity.ru/ как реализавать подобное?, а точнее посредством чего html там черт ногу сломит а в js неврубаюсь , ...


Закрытая тема
 
Опции темы
Старый 17.09.2009, 13:39   #1
наткнулся на такое вот меню
http://www.mysexcity.ru/
как реализавать подобное?, а точнее посредством чего
html там черт ногу сломит а в js неврубаюсь ,
но уж больно понравилось как цветовой диапозон открываеться
плавно под курсором
 
Старый 17.09.2009, 13:39
Ссылки
Старый 17.09.2009, 14:05   #2
http://www.gmarwaha.com/blog/2007/08...jquery-lovers/
http://common.mysexcity.ru/menu_active.png
а остальное дело техники
 
Этот пользователь сказал спасибо Niemans за это полезное сообщение:
vitaly-go (17.09.2009)
Старый 17.09.2009, 18:13   #3
Nimans спасибо, скачал пересобрал из того что было, перековырял все что смог, но хоть умри немогу вставить в css utf-8, а без него русский пашет только в принудительном порядке
в html есть а вот при попытке вставить его в css или ничего неотображается или только активная часть меню и не правит кодировку

Код:
<?xml version="1.0" encoding="utf-8"?>
        .lavaLampWithImage {
            position: relative;
            height: 30px;
            width: 1000px;
            background: url("img_h/menu_bg.png") no-repeat top;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url("img_h/lava.gif") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url("img_h/menu_bg0.gif") repeat-x top left;
                            height: 30px;
							margin-left: 0px;
                            margin-right: 0px; /* 7px is the width of the rounded shape */
							z-index: 6;
                        }
                    .lavaLampWithImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;    
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }
да и основной вопрос как сделать так чтобы именно цветастая полоска отображалась частично а не закрывалась поверх другой,
пробовал менять z-index на противоположные значения, неспасло
p.s. вот так это выглядит сейчас
http://vitalygoon.narod.ru/index55.html
 
Старый 17.09.2009, 18:29   #4
Цитата:
Сообщение от vitaly-go Посмотреть сообщение
хоть умри немогу вставить в css utf-8
Цитата:
Сообщение от vitaly-go Посмотреть сообщение
в html есть а вот при попытке вставить его в css
зачем Вам для css utf-8??
Может Вам utf-8 для xml нужон? Причем тут отображение кирилицы и css?
 
Старый 17.09.2009, 18:34   #5
Цитата:
Сообщение от Aldes Посмотреть сообщение
зачем Вам для css utf-8??
Может Вам utf-8 для xml нужон? Причем тут отображение кирилицы и css?
..... (яж предупреждал что я гений ) эт наверно от безисходности уже начал сунуть везде)))
я уже сам плохо понимаю что там нужно, но xml там нет как такового, там есть html (в нем прописано), код ниже), css внешний, и js аж 3шт.

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<head>
    <title>vitaly-go, главная "дизайн, визуализация, web, полиграфия, вывески, интерьеры, экстерьеры</title>
    <link rel="stylesheet" href="lavalamp_menu.css" type="text/css" media="screen">
    <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="jquery.easing.min.js"></script>
    <script type="text/javascript" src="jquery.lavalamp.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>
</head>

<body>

<ul class="lavaLampWithImage" id="1">
    <li class="current"><a href="#">Главная</a></li>
    <li><a href="#">web2.0</a></li>
    <li><a href="#">интерьеры</a></li>
    <li><a href="#">экстерьеры</a></li>
    <li><a href="#">полиграфия</a></li>
    <li><a href="#">наружка</a></li>
</ul>



</body></html>
 
Старый 17.09.2009, 18:45   #6
<?xml version="1.0" encoding="utf-8"?>
в цсс Вы дописали сами?

Добавлено через 3 минуты

Ваша кирилица прописана в html, Вам нужно html в utf-8.
Для этого откройте его в блокноте обычном и сохранить как - поставьте нужную кодировку

Последний раз редактировалось Aldes; 17.09.2009 в 18:45.. Причина: Добавлено сообщение
 
Этот пользователь сказал спасибо Aldes за это полезное сообщение:
vitaly-go (17.09.2009)
Старый 17.09.2009, 18:45   #7
Цитата:
да и основной вопрос как сделать так чтобы именно цветастая полоска отображалась частично а не закрывалась поверх другой,
пробовал менять z-index на противоположные значения, неспасло
vitaly-go
Код:
.lavaLampWithImage {
	position: relative;
	height: 30px;
	width: 1000px;
	background: url("http://vitalygoon.narod.ru/img_h/menu_bg0.gif") repeat-x top left;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}


.lavaLampWithImage li.back .left {
	background: url("http://vitalygoon.narod.ru/img_h/menu_bg.png") no-repeat top;
	height: 30px;
	margin-left: 0px;
	margin-right: 0px; /* 7px is the width of the rounded shape */
	z-index: 6;
}
 
Этот пользователь сказал спасибо Niemans за это полезное сообщение:
vitaly-go (17.09.2009)
Старый 17.09.2009, 18:49   #8
вот именно!, вот я отморозок блин))))),
я просто тупо чтобы взять этот utf-8 брал и создавал новый xml а не css и тупо переносил в css но проблему эт нерешает всеравно тк css ведь на самом деле непричем, и где тогда искать?
 
Старый 17.09.2009, 18:50   #9
читайте выше, я дописывал

вот посмотрите, только зачем Вам utf-8? Используйте charset=windows-1251

Последний раз редактировалось Aldes; 17.09.2009 в 19:00..
 
Этот пользователь сказал спасибо Aldes за это полезное сообщение:
vitaly-go (17.09.2009)
Старый 17.09.2009, 19:01   #10
Aldes, Nimans спасибо, но вот сделал как показали а результат чтот нерадует блин http://vitalygoon.narod.ru/index57.html
 
Старый 17.09.2009, 19:01
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Техническая реализация проектов любой сложности IQ_Крым Резюме 0 10.05.2016 16:18
Интернет Безопасность. Идеи, реализация, предложение. Argon Кальянная 21 20.03.2010 23:30
Реализация карты на Flash (перемещение карты) ryasal Технологии Flash 1 09.11.2009 23:32
Нужны идеи макета и реализация monolithosting Вакансии 0 26.02.2006 22:30
реализация БД на Php? Dio's de Lammos HTML, CSS, JavaScript 3 07.01.2004 15:45


Текущее время: 12:34. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум