Реклама на hackersoft.ru Реклама на hackersoft.ru

Вернуться   Форумы Hackersoft > Околотематические разделы > Для разработчиков > Графика и дизайн
CHAT Регистрация Справка Пользователи Доска почета Календарь Поиск Сообщения за день Все разделы прочитаны

Графика и дизайн Для тех, кто занимается графикой. Подделываем скрины, сканы, фото, рисуем всякие креативы, работа с программами Photoshop, Illustrator, Corel Draw, Flash

Ответ
 
Опции темы
Старый 07.11.2010, 19:14   #1
SoftHack
☣ 
 
Аватар для SoftHack
 
Регистрация: 07.07.2009
Прописка: Real Life
Сообщений: 610
Вес репутации: 16 SoftHack продвинутыйSoftHack продвинутыйSoftHack продвинутыйSoftHack продвинутый
Депозит: 0$
Вы сказали Спасибо: 290
Поблагодарили 262 раз(а) в 176 сообщениях
CSS3 Menu

Используя возможности нового стандарта, решил написать сайтег
Выкладываю меню с этого сайта, мб кому нибудь пригодиться, за ошибки не ругать (никаких ява скриптов, только HTML и CSS):
Код HTML:
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS Menu</title>
	<style type="text/css">	
.vertical-menu {
	/*	opacity: 0.1;*/
	width: 200px;
	box-shadow: 0px 0px 1px #999;
	-moz-box-shadow: 0px 0px 1px #999;
	-webkit-box-shadow: 0px 0px 1px #999;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border: thin solid #CCC;
	background-color: #FFF;
	float: left;
	background-image:
 -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, rgb(242,242,242)),  color-stop(0.67, rgb(255,255,255)) );
	background-image:
 -moz-linear-gradient(  center bottom,  rgb(242,242,242) 0%,  rgb(255,255,255) 67% );
	padding: 10px 4px 10px 4px;
}
.menu-title {
	display: block;
	text-shadow: 1px 1px 0 #ccc;
	font-family: Helvetica, Arial, sans-serif;
	color: #333;
	font-size: 14pt;
	margin-left: 5px;
}
#menu-box {
	border: thin solid #000;
	height: auto;
	background-color: #141414;
	background-image:
	-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.43, rgb(20,20,20)),
    color-stop(1, rgb(31,31,31))
);
	background-image:
	-moz-linear-gradient(
    center bottom,
    rgb(20,20,20) 43%,
    rgb(31,31,31) 100%
);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin-top: 5px;
	padding: 30px 15px 15px 20px;
}
#menu-box ul {
	margin: 0px;
	padding: 0px;
}
#menu-box li {
	padding-left:10px;
	list-style: none;
	display: block;
	margin-bottom: 10px;
	box-shadow: 0px 0px 10px #999;
	-moz-box-shadow: 0px 0px 10px #999;
	-webkit-box-shadow: 0px 0px 10px #999;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	-webkit-transition: color .4s linear;
	border: 1px solid #999;
}
#menu-box li:hover {
	box-shadow: 0px 0px 10px #7FFFD4;
	-moz-box-shadow: 0px 0px 10px #7FFFD4;
	-webkit-box-shadow: 0px 0px 20px #7FFFD4
	;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background-color:#000;
	font-weight:bold;
		
}
#menu-box li a {
	display: block;
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	font-size:10pt;
	color:#dbfff3;
	text-decoration: none;
	position: relative;
	-webkit-transition: left .4s linear;
}
#menu-box li a:hover {
	left: 40px;
	color:#7FFFD4;
	
}
	</style>
</head>
<body>
	<div class="vertical-menu">
        <div class="menu-title">Главное меню</div>
        <div id="menu-box">
          <ul>
            <li class="1"><a href="css3-effects/index.php">1</a></li>
            <li class="2"><a href="css3-effects/index.php">2</a></li>
            <li class="2"><a href="css3-effects/index.php">3</a></li>
            <li class="2"><a href="css3-effects/index.php">4</a></li>
            <li class="2"><a href="css3-effects/index.php">5</a></li>
          </ul>
        </div>
      </div>
</body>
</html>
Для корректного отображения рекомендую использовать Google Chrome или Apple Safari

HackersOfTrue! Хакеры правды! (C) Kanaris

Последний раз редактировалось SoftHack, 23.01.2011 в 16:11.
SoftHack вне форума   Ответить с цитированием
Благодарности SoftHack от:
Старый 07.11.2010, 22:58   #2
vantous
advanced 
 
Аватар для vantous
 
Регистрация: 11.10.2009
Сообщений: 484
Вес репутации: 10 vantous новичек
Депозит: 0$
Вы сказали Спасибо: 72
Поблагодарили 56 раз(а) в 45 сообщениях
Цитата:
Для корректного отображения рекомендую использовать Google Chrome или Apple Safari
В Опере все тоже более менее корректно.
vantous вне форума   Ответить с цитированием
Старый 08.11.2010, 00:00   #3
SoftHack
☣ 
 
Аватар для SoftHack
 
Регистрация: 07.07.2009
Прописка: Real Life
Сообщений: 610
Вес репутации: 16 SoftHack продвинутыйSoftHack продвинутыйSoftHack продвинутыйSoftHack продвинутый
Депозит: 0$
Вы сказали Спасибо: 290
Поблагодарили 262 раз(а) в 176 сообщениях
Цитата:
Сообщение от vantous Посмотреть сообщение
В Опере все тоже более менее корректно.
градиенты, плавная анимация и ещё что то не корректно отображается.
ЗЫ в коде ошибки, мб поэтому и коряво (завтра постараюсь исправить)

HackersOfTrue! Хакеры правды! (C) Kanaris
SoftHack вне форума   Ответить с цитированием
Старый 21.11.2014, 00:47   #4
SwondeR
newbie 
 
Регистрация: 14.06.2013
Прописка: Mundo
Сообщений: 3
Вес репутации: 0 SwondeR новичек
Депозит: 0$
Вы сказали Спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Version 7.0
We have a flyout menu that was custom made for us over three years ago. We did not realize at the time that our Flyout menu can only display two levels, the Primary Category and one subcategory level. I think our code is poorly written because the Unordered List statements are in the html page, not in the code behind file. If you have the flyout menu working for any number of levels, would you please share all sections of your code? HTML, Code behind, CSS and control files
SwondeR вне форума   Ответить с цитированием
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +4, время: 17:38.


© 2005 — +∞ Hackersoft. Все и вся защищены.
Публичная оферта | Правила форума | Реклама на сайте
Powered by vBulletin®©™ Jelsoft®©™ Enterprises Ltd. Перевод: zCarot.
Реклама на hackersoft.ru Реклама на hackersoft.ru