как сделать это меню - HTML и CSS - Страница 2

vanooo · 13.02.2012, 15:58

Все разобрался сам

titan2012 · 19.02.2012, 06:08

Цитата:

Сообщение от vanooo

Спасибо огромное за помощь,titan2012 это меню из новой политики конфиденциальности google http://www.google.ru/intl/ru/policies/privacy/

посмотрел я ту менюшку, да только там тоже используется картинка, даже гугл использует картинки)))
могу предоставить код

titan2012 · 19.02.2012, 06:22

вот скрин

vanooo · 20.02.2012, 14:05

titan2012 Если тебе не сложно можешь дать код

titan2012 · 20.02.2012, 15:36

Цитата:

Сообщение от vanooo

titan2012 Если тебе не сложно можешь дать код

конечно не сложно, правда мож по дебильному, но все работает
вот
html

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width">
<title>"Ренессанс-Элит"</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<script>
(function(H){H.className=H.className.replace(/\bgoogle\b/,'google-js')})(document.documentElement)
</script>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic">
<link rel="stylesheet" href="/policies/css/default.css">
<script>
new gweb.analytics.AutoTrack({
profile: 'UA-28138501-1'
});
</script>
</head>
<body>
 <div id="maia-nav-x" class="maia-nav maia-complex">
<div class="maia-aux">
<ul>
<li>
<a href="../../policies/">Обзор</a>
</li>
<li class="active">
Политика конфиденциальности
<ul>
<li>Текущая версия </li>
<li>
<a href="../../policies/privacy/preview/">Предварительный просмотр</a>
</li>
<li>
<a href="../../policies/privacy/archive/">Предыдущие версии</a>
</li>
<li>
<a href="../../policies/privacy/faq/">Часто задаваемые вопросы</a>
</li>
</ul>
</li>
<li>
<a href="../../policies/terms/">Условия использования</a>
</li>
<li>
<a href="../../policies/faq/">Часто задаваемые вопросы</a>
</li>
</ul>
</div>
</div>
</body>
</html>

titan2012 · 20.02.2012, 15:38

css

Код HTML:

html, input, textarea {
    font-family: arial,sans-serif;
	color: #444444;
    font-size: 13px;
	line-height: 1.5;
}

h1, h2, h3, h4, blockquote, q, .maia-nav ul {
    font-family: 'open sans',arial,sans-serif;
}

ul, ol {
    margin: 10px 10px 10px 30px;
    padding: 0;
}

#maia-nav-x {
    background: -moz-linear-gradient(center top , #6C7A95 0pt, #4D5B76 45px, #E5E5E5 46px, #F7F7F7 47px, #FFFFFF 48px) repeat-x scroll center top #6C7A95;
    padding: 0 35px;
	margin: 0 -15px;
}

#maia-nav-x ul {
    height: 50px;
    list-style: none outside none;
    margin: 0;
    position: relative;
}

#maia-nav-x li {
    float: left;
    font-size: 15px;
    line-height: 20px;
    margin: 0 30px 0 0;
    padding: 13px 0 17px;
    text-shadow: 0 -1px 1px #555D72;
}

#maia-nav-x li li a:hover {
border-bottom:1px solid #1155CC}

#maia-nav-x li a, #maia-nav-x li.active li a {
    font-weight: normal;
}

#maia-nav-x li, #maia-nav-x li a {
    color: #FFFFFF;
}

#maia-nav-x li li {
    font-size: 14px;
    padding: 5px 0 7px;
    text-shadow: none;
}

#maia-nav-x li li, #maia-nav-x li li.active a {
    color: #444444;
}

#maia-nav-x.maia-complex ul {
    height: 82px;
}

#maia-nav-x ul ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #EBEBEB;
    height: 32px !important;
    left: 0;
    position: absolute;
    top: 49px;
    width: 100%;
}

#maia-nav-x li li a {
    color: #1155CC;
}

a:link {
    color: #1155CC;
    text-decoration: none;
}
a:hover {
border-bottom:1px solid #EBEBEB;
}

#maia-nav-x li, #maia-nav-x li.active a, #maia-nav-x li.active li, #maia-nav-x li.active li.active a {
    font-weight: bold;
}

#maia-nav-x ul {
    list-style: none outside none;
}

#maia-nav-x li.active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAKCAYAAACuaZ5oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH1JREFUeNpi/P//PwORgBmIJ0DZBUD8lyhdIAuIwEJAvP0/AmyHihHUS4zhKkB8+z8muA2Vo8gCeyB++x83eAtVQ5YFOUD88z9h8AeqlmgLmIF48n/SwWSoXrwWoEcmqQAj8omJTFIBSuQTG5mkAnjkwyLzz3/qA3DkAwQYABEvANn67PzPAAAAAElFTkSuQmCC") no-repeat scroll center 40px transparent;
}

titan2012 · 20.02.2012, 15:40

все так подключай, картинок нету в папочках никаких, они тянутся с интернета
только укажешь путь к css и все работает

vanooo · 21.02.2012, 18:45

titan2012 спасибо )

Viktoriya_007 · 07.04.2012, 16:23

В общем,как-то так каряво намалевала

Что мне нужно?Хочу,чтоб при нажатии мышки на "Животные", "Грибы" и т.п. открывалось подменю с определенными ссылками как на рисунке,при пробеге по меню происходило как бы перелистывание

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Меню codrops (стильное меню), Как сделать чтобы текст не смещался в блоке?	AlienNation	HTML и CSS	2	28.09.2011 13:17
как это сделать?	salair	Помощь студентам	0	30.04.2011 19:40
Tabs-меню. Как это реализовано (ссылка на образец)?	akokin	HTML и CSS	3	14.10.2009 15:36
как это сделать?	DeDoK	Общие вопросы Delphi	2	11.07.2008 04:41

13.02.2012, 15:58	#11
vanooo Пользователь Регистрация: 12.02.2012 Сообщений: 17	Все разобрался сам

20.02.2012, 14:05	#14
vanooo Пользователь Регистрация: 12.02.2012 Сообщений: 17	titan2012 Если тебе не сложно можешь дать код

20.02.2012, 15:40	#17
titan2012 Пользователь Регистрация: 07.02.2012 Сообщений: 95	все так подключай, картинок нету в папочках никаких, они тянутся с интернета только укажешь путь к css и все работает

21.02.2012, 18:45	#18
vanooo Пользователь Регистрация: 12.02.2012 Сообщений: 17	titan2012 спасибо )