Ищу меню или нужна помощь в его реализации - Форум
Страница 1 из 212»
Форум » Форум веб мастеров » uCoz » Ищу меню или нужна помощь в его реализации (Нужна помощь)
Ищу меню или нужна помощь в его реализации

Master
Проверенные
Сообщений 61
+
+2061
-
Ваши награды 0
Master написал: В ответ пользователя Master Написано 16 Ноября 2012 в 00:14
Сообщение № 1
Мне нужно меню на подобие вот этого:

То есть чтобы было обычное горизонтальное меню, но над каждым пунктом меню были иконки.
Везде искал, ничего не нашел, решить сюда написать.
Или скажите как сделать эти икноки, чтобы все было ровно а под иконками надпись.
Если не понятно что я хочу, спрашивайте...
«Пред. тема След. тема»

Voker
VIP
Сообщений 2578
+
+9993
-
Ваши награды 25
Voker написал: В ответ пользователя Voker Написано 16 Ноября 2012 в 00:35
Сообщение № 2
Master, Группа Проверенные - эх....
А самому сделать что тяжело?!
Или рипнуть.
подпись:
Voker

Master
Проверенные
Сообщений 61
+
+2061
-
Ваши награды 0
Master написал: В ответ пользователя Master Написано 16 Ноября 2012 в 00:36
Сообщение № 3
Voker, ну группа проверенные мне халявно досталась) Сам делать пытался и рипать, не получается(

GhostlyP
VIP
Сообщений 475
+
+2944
-
Ваши награды 35
GhostlyP написал: В ответ пользователя GhostlyP Написано 16 Ноября 2012 в 01:46
Сообщение № 4
что то типа такого
подпись: Linkum GhostlyP

Master
Проверенные
Сообщений 61
+
+2061
-
Ваши награды 0
Master написал: В ответ пользователя Master Написано 17 Ноября 2012 в 18:10
Сообщение № 5
Ghostly_Phoenix, к сожелению иконки в опере неправильно отображаются, они выравниваются по левому краю(

GhostlyP
VIP
Сообщений 475
+
+2944
-
Ваши награды 35
GhostlyP написал: В ответ пользователя GhostlyP Написано 17 Ноября 2012 в 18:24
Сообщение № 6
okey
подпись: Linkum GhostlyP

Supermenыч
Проверенные
Сообщений 335
+
+213
-
Ваши награды 6
Supermenыч написал: В ответ пользователя Supermenыч Написано 18 Ноября 2012 в 18:12
Сообщение № 7
дай мне иконки и я попробую сделать
подпись: HTML ~ 75%
CSS ~ 70%
------------------------------------
Ничто не истинно, всё дозволено... Supermenыч

DJ_FORWARD
Проверенные
Сообщений 733
+
+333
-
Ваши награды 15
DJ_FORWARD написал: В ответ пользователя DJ_FORWARD Написано 18 Ноября 2012 в 18:39
Сообщение № 8
Щяс рипну,посмотрим что получится!

Добавлено (18.11.2012, 18:39)
---------------------------------------------
Не получается... Стилей нету..Весь код облазил не нашел стиль для меню!


Supermenыч
Проверенные
Сообщений 335
+
+213
-
Ваши награды 6
Supermenыч написал: отредактировал: Supermenыч - Воскресенье, 18.11.2012, 20:53 В ответ пользователя Supermenыч Написано 18 Ноября 2012 в 20:47
Сообщение № 9
<style>
.menu{
background:-webkit-linear-gradient(top,#5483B2,#165696);
background:-moz-linear-gradient(top,#5483B2,#165696);
background:-o-linear-gradient(top,#5483B2,#165696);
background:linear-gradient(top,#5483B2,#165696);
height:42px;
width:100%;
border-bottom: 1px solid #14467A;
border-top:1px solid #366898;
}
.li{
padding: 16px 15px 4px;
color:white;
display:inline-block;
font-family:'Arial';
font-size:10pt;
}
.li:hover{
background:-webkit-linear-gradient(top,#406C9B,#144C87);
background:-moz-linear-gradient(top,#406C9B,#144C87);
background:-o-linear-gradient(top,#406C9B,#144C87);
background:linear-gradient(top,#406C9B,#144C87);
cursor:pointer;
}
.li:active{
background:-webkit-linear-gradient(top,#255C95,#255C95);
background:-moz-linear-gradient(top,#255C95,#255C95);
background:-o-linear-gradient(top,#255C95,#255C95);
background:linear-gradient(top,#255C95,#255C95);
}
.icons{
background:url("/icon.png");
width:18px;
height:18px;
margin-top:-12px;
position:relative;
}
</style>
<div class="menu"><div class="li"><div class="icons" style="margin-left:18px;"></div>Написать</div><div class="li"><div class="icons" style="background-position:0px 31px;margin-left:15px;"></div>Письма</div><div class="li"><div class="icons" style="background-position:0px -80px;margin-left:15px;"></div>Адреса</div><div class="li"><div class="icons" style="background-position:0px 72px;margin-left:12px;"></div>Файлы</div><div class="li"><div class="icons" style="background-position:0px 117px;margin-left:5px;"></div>Ещё</div></div>

пробуй


картинку залей в корень сайта
подпись: HTML ~ 75%
CSS ~ 70%
------------------------------------
Ничто не истинно, всё дозволено... Supermenыч

Voker
VIP
Сообщений 2578
+
+9993
-
Ваши награды 25
Voker написал: В ответ пользователя Voker Написано 18 Ноября 2012 в 21:09
Сообщение № 10
Supermenыч,используй [code]
подпись:
Voker

Master
Проверенные
Сообщений 61
+
+2061
-
Ваши награды 0
Master написал: В ответ пользователя Master Написано 18 Ноября 2012 в 21:58
Сообщение № 11
Supermenыч, Спасибо) Но я уже другое решение нашел как исправит баг в опере)

Добавлено (18.11.2012, 21:58)
---------------------------------------------
А как сделать в нем еще и выпадающий пункт?)


Supermenыч
Проверенные
Сообщений 335
+
+213
-
Ваши награды 6
Supermenыч написал: В ответ пользователя Supermenыч Написано 18 Ноября 2012 в 22:19
Сообщение № 12
я попробую сделать, завтра напишу как
подпись: HTML ~ 75%
CSS ~ 70%
------------------------------------
Ничто не истинно, всё дозволено... Supermenыч

GhostlyP
VIP
Сообщений 475
+
+2944
-
Ваши награды 35
GhostlyP написал: В ответ пользователя GhostlyP Написано 18 Ноября 2012 в 22:20
Сообщение № 13
Master, выложи сюда код(то что исправил), у меня есть идея)
подпись: Linkum GhostlyP

Master
Проверенные
Сообщений 61
+
+2061
-
Ваши награды 0
Master написал: В ответ пользователя Master Написано 18 Ноября 2012 в 23:01
Сообщение № 14
CSS:


HTML:


Вот)

Добавлено (18.11.2012, 23:01)
---------------------------------------------
Supermenыч, окей лс напишеш)


Supermenыч
Проверенные
Сообщений 335
+
+213
-
Ваши награды 6
Supermenыч написал: В ответ пользователя Supermenыч Написано 18 Ноября 2012 в 23:10
Сообщение № 15
Code
<style>
.menu{
background:-webkit-linear-gradient(top,#5483B2,#165696);
background:-moz-linear-gradient(top,#5483B2,#165696);
background:-o-linear-gradient(top,#5483B2,#165696);
background:linear-gradient(top,#5483B2,#165696);
height:42px;
width:100%;
border-bottom: 1px solid #14467A;
border-top:1px solid #366898;
}
.li{
padding: 16px 15px 4px;
color:white;
display:inline-block;
font-family:'Arial';
font-size:10pt;
}
.li:hover{
background:-webkit-linear-gradient(top,#406C9B,#144C87);
background:-moz-linear-gradient(top,#406C9B,#144C87);
background:-o-linear-gradient(top,#406C9B,#144C87);
background:linear-gradient(top,#406C9B,#144C87);
cursor:pointer;
}
.li:active{
background:-webkit-linear-gradient(top,#255C95,#255C95);
background:-moz-linear-gradient(top,#255C95,#255C95);
background:-o-linear-gradient(top,#255C95,#255C95);
background:linear-gradient(top,#255C95,#255C95);
}
.lid{
padding: 16px 15px 4px;
color:white;
display:inline-block;
font-family:'Arial';
font-size:10pt;
}
.lid:hover{
background:-webkit-linear-gradient(top,#406C9B,#144C87);
background:-moz-linear-gradient(top,#406C9B,#144C87);
background:-o-linear-gradient(top,#406C9B,#144C87);
background:linear-gradient(top,#406C9B,#144C87);
cursor:pointer;
}
.lid:active{
background:-webkit-linear-gradient(top,#255C95,#255C95);
background:-moz-linear-gradient(top,#255C95,#255C95);
background:-o-linear-gradient(top,#255C95,#255C95);
background:linear-gradient(top,#255C95,#255C95);
}
.icons{
background:url("icon.png");
width:18px;
height:18px;
margin-top:-12px;
position:relative;
}
.drop{
display:none;
width:100px;
height:150px;
position:absolute;
opacity:0;
border:1px solid #9FC1EB;
background:white;
margin-top:8px;
margin-left:-15px;
border-radius:2px;
-webkit-box-shadow:1px 1px 2px black;
}
.dropli{
padding:3px;
width:94px;
color:#0857A6;
}
.dropli:hover{
background:#9FC1EB;
}
</style>
<div class="menu"><a href="#"><div class="li"><div class="icons" style="margin-left:18px;"></div>Написать</div></a><a href="#"><div class="li"><div class="icons" style="background-position:0px 31px;margin-left:15px;"></div>Письма</div></a><a href="#"><div class="li"><div class="icons" style="background-position:0px -80px;margin-left:15px;"></div>Адреса</div></a><a href="#"><div class="li"><div class="icons" style="background-position:0px 72px;margin-left:12px;"></div>Файлы</div></a><a href="#"><div class="lid" onclick="start()"><div class="icons" style="background-position:0px 117px;margin-left:5px;"></div>Ещё<div class="drop"><div class="dropli">123</div><div class="dropli">1234</div></div></div></a></div>
<script>
function start(){
$(".drop").css("display","block");
$(".drop").animate({opacity:1},300);
$(".lid").attr("onclick","start1()");
$(".lid").css("background","-webkit-linear-gradient(top,#255C95,#255C95)");
};
function start1(){
$(".drop").fadeOut(300);
$(".drop").animate({opacity:0},300);
$(".lid").attr("onclick","start()");
$(".lid").css("background","-webkit-linear-gradient(top,#5483B2,#165696)");
};
</script>

Добавлено (18.11.2012, 23:06)
---------------------------------------------
там потом изменишь под себя как надо

Добавлено (18.11.2012, 23:10)
---------------------------------------------
ссылки там сам сделаешь

подпись: HTML ~ 75%
CSS ~ 70%
------------------------------------
Ничто не истинно, всё дозволено... Supermenыч
Форум » Форум веб мастеров » uCoz » Ищу меню или нужна помощь в его реализации (Нужна помощь)
Страница 1 из 212»
Поиск:
Топ пользователей: