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

vitaly-go · 17.09.2009, 13:39

наткнулся на такое вот меню
http://www.mysexcity.ru/
как реализавать подобное?, а точнее посредством чего
html там черт ногу сломит а в js неврубаюсь

,
но уж больно понравилось как цветовой диапозон открываеться
плавно под курсором

Niemans · 17.09.2009, 14:05

http://www.gmarwaha.com/blog/2007/08...jquery-lovers/
http://common.mysexcity.ru/menu_active.png
а остальное дело техники

vitaly-go · 17.09.2009, 18:13

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

Aldes · 17.09.2009, 18:29

Цитата:

Сообщение от vitaly-go

хоть умри немогу вставить в css utf-8

Цитата:

Сообщение от vitaly-go

в html есть а вот при попытке вставить его в css

зачем Вам для css utf-8??
Может Вам utf-8 для xml нужон? Причем тут отображение кирилицы и css?

vitaly-go · 17.09.2009, 18:34

Цитата:

Сообщение от 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>

Aldes · 17.09.2009, 18:45

<?xml version="1.0" encoding="utf-8"?>
в цсс Вы дописали сами?

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

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

Niemans · 17.09.2009, 18:45

Цитата:

да и основной вопрос как сделать так чтобы именно цветастая полоска отображалась частично а не закрывалась поверх другой,
пробовал менять 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;
}

vitaly-go · 17.09.2009, 18:49

вот именно!, вот я отморозок блин))))),
я просто тупо чтобы взять этот utf-8 брал и создавал новый xml а не css и тупо переносил в css

но проблему эт нерешает всеравно тк css ведь на самом деле непричем, и где тогда искать?

Aldes · 17.09.2009, 18:50

читайте выше, я дописывал

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

vitaly-go · 17.09.2009, 19:01

Aldes, Nimans спасибо, но вот сделал как показали а результат чтот нерадует блин http://vitalygoon.narod.ru/index57.html

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Техническая реализация проектов любой сложности	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

17.09.2009, 13:39	#1
vitaly-go	наткнулся на такое вот меню http://www.mysexcity.ru/ как реализавать подобное?, а точнее посредством чего html там черт ногу сломит а в js неврубаюсь , но уж больно понравилось как цветовой диапозон открываеться плавно под курсором

17.09.2009, 14:05	#2
Niemans	http://www.gmarwaha.com/blog/2007/08...jquery-lovers/ http://common.mysexcity.ru/menu_active.png а остальное дело техники

17.09.2009, 18:45	#6
Aldes	<?xml version="1.0" encoding="utf-8"?> в цсс Вы дописали сами? Добавлено через 3 минуты Ваша кирилица прописана в html, Вам нужно html в utf-8. Для этого откройте его в блокноте обычном и сохранить как - поставьте нужную кодировку Последний раз редактировалось Aldes; 17.09.2009 в 18:45.. Причина: Добавлено сообщение

17.09.2009, 18:49	#8
vitaly-go	вот именно!, вот я отморозок блин))))), я просто тупо чтобы взять этот utf-8 брал и создавал новый xml а не css и тупо переносил в css но проблему эт нерешает всеравно тк css ведь на самом деле непричем, и где тогда искать?

17.09.2009, 18:50	#9
Aldes	читайте выше, я дописывал вот посмотрите, только зачем Вам utf-8? Используйте charset=windows-1251 Последний раз редактировалось Aldes; 17.09.2009 в 19:00..

17.09.2009, 19:01	#10
vitaly-go	Aldes, Nimans спасибо, но вот сделал как показали а результат чтот нерадует блин http://vitalygoon.narod.ru/index57.html