Всплывающее меню

WHITEMAN23 · August 17, 2011

Здравствуйте.

Недавно начал осваивать верстку. Сейчас делаю первый макет и столкнулся с проблемной. Не могу сделать горизонтальное всплывающее меню.

HTML


<!DOCTYPE html>
 <head>
  <meta charset="utf-8" >
  <title>TeaM GreeD</title>
<link href="css/common.css"  rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->
 </head>
 <body>
	 <div id="container"> <!--Регулирует размеры по ширине!-->
		<div id="header">
			  <ul id="menu">
				<li><a href="#"><span>Главная</span></a></li>
				<li><a href="#"><span>О нас</span></a></li>
					<ul>
						<li><a href="#"><span>Устав</span></a></li>
						<li><a href="#"><span>Состав клана</span></a></li>
						<li><a href="#"><span>Вступление в клан</span></a></li>
					</ul>
				<li><a href="#"><span>Форум</span></a></li>
			  </ul>
	</div>
			<div id="main">
				<div id="all">
					<div id="out">
						<div id="right"></div>
					</div>	
					<div id="left">
						<div id="news_container"> 
							<div id="float_news"></div>
						</div>
						<div id="content"> </div>
					</div>
				</div>
			</div>	<!--Препятствует выпадению элементов и перпятствует заползанию контента за футер!-->
		<div id="footer"> <!--Футер!-->
		</div>

	 </div>
 </body>
</html>

CSS


html, body{
	height:100%;
	margin:0; /*Для схемы с прижатым футером высота на всю область просмотра*/
}
html{
 background:#fff;
 color:#808080;
 font:12px tahoma, verdana, geneva, sans-serif;
}
body{
	margin:0;	/*Убираем отступы*/
}
#container{
	height:100%;
	width:1200px;
	margin:auto;	/*Центрируем*/
}
#main{
	min-height:100%;
	margin:0 100px -60px;	/*Для футера*/
}
all{
 	margin:39px 0 60px;
}
#out{
	float:right;
	width:100%;
	margin-left:-750px;
}
#right{
	margin-left:750px;
}
#left{
	float:left;
	width:750px;
}
#news_container{
	width:750px;
	height:350px;
	background:#fcf;
	margin:0 0 10px;
}
#float_news{
	position:relative;
	top:5px;
	left:10px;
	width:730px;
	height:340px;
	background:#faa;
}
#Content{
	width:720px;
	background:#fcf;
}
#footer{
	overflow:hidden;
	position:relative;
	height:60px;
	background:#00afdd;
}
#header{
	left:0;
	top:0;
	width:100%;
	height:39px;
	background:url(../images/Head.jpg)

}
#menu{
	margin:0 0 0 550px;
	padding:0;
	list-style:none;
}
#menu li{
	float:left;
	margin-right:30px;
}
#menu li ul{
	display:none;
	position:absolute;
	left:0;
}
#menu li li{
	float:none;
	}
#menu li li a{
	float:none;
	display:block;
	background:#999;
}
#menu li li a:hover{
	background:#333;
}
#menu a,#menu span{
	line-height:37px;
	height:37px;

}
#menu a{
	display:inline-block;
	text-transform:uppercase;
	text-decoration:none;
	color:#FFF;
}
#menu span{
	position:relative;
	padding:5px 10px;
}
#menu a:hover{
	background:#333;
}

psywalker · August 17, 2011

Вот это что за ужас?

                                <li><a href="#"><span>О нас</span></a></li>
                                        <ul>
                                                <li><a href="#"><span>Устав</span></a></li>
                                                <li><a href="#"><span>Состав клана</span></a></li>
                                                <li><a href="#"><span>Вступление в клан</span></a></li>
                                        </ul>

WHITEMAN23 · August 17, 2011

Ну я хотел сделать горизонтальное меню и в пункте "О нас" при наведении должен появляться горизонтальный список.

Собственно в чем ужас то? Вроде на вебинарах специалиста также делали.

Edited August 17, 2011 by WHITEMAN23

psywalker · August 17, 2011

Ну я хотел сделать горизонтальное меню и в пункте "О нас" при наведении должен появляться горизонтальный список.
Собственно в чем ужас то? Вроде на вебинарах специалиста также делали.

Ужас в том, что ты не правильно составляешь структуру html. Покажи статьи, которые ты читал, для достижения цели.

WHITEMAN23 · August 17, 2011

_http://rutracker.org/forum/viewtopic.php?t=3441332 вот от сюда со спанами в пункте о нас сам сделал.

Что бы Вы порекомендовали исправить и почитать?

psywalker · August 17, 2011

_http://rutracker.org/forum/viewtopic.php?t=3441332 вот от сюда со спанами в пункте о нас сам сделал.
Что бы Вы порекомендовали исправить и почитать?

Значит ты невнимательно читал. Вот как правильно делать.

                                <li><a href="#"><span>О нас</span></a>
                                        <ul>
                                                <li><a href="#"><span>Устав</span></a></li>
                                                <li><a href="#"><span>Состав клана</span></a></li>
                                                <li><a href="#"><span>Вступление в клан</span></a></li>
                                        </ul>
</li>

Чуешь разницу?

WHITEMAN23 · August 17, 2011

Спасибо. Согласен сделал глупо т.к. вмест одного списка внутри пукта сделал просто список в списке.

А как решить проблему с тем что меню не всплывает?

psywalker · August 17, 2011

Спасибо. Согласен сделал глупо т.к. вмест одного списка внутри пукта сделал просто список в списке.
А как решить проблему с тем что меню не всплывает?

Ну для начала сделай правильную разметку. А потом уже с помощью ховера на LI показывай вложенное меню.

WHITEMAN23 · August 17, 2011

<li><a href="#"><span>О нас</span></a>
	<ul>
		<li><a href="#"><span>Устав</span></a></li>
		<li><a href="#"><span>Состав клана</span></a></li>
		<li><a href="#"><span>Вступление в клан</span></a></li>
	</ul>
     </li>

Сделал, а вот в CSS hover задал но все равно что-то не то.


#menu{
	margin:0 0 0 550px;
	padding:0;
	list-style:none;
}
#menu li{
	float:left;
	margin-right:30px;
	position:relative;
}
#menu li ul{
	display:none;
	position:absolute;
	left:0;
}
#menu li li{
	float:none;
	}
#menu li li a{
	float:none;
	display:block;
	background:#999;
}
#menu li li a:hover{
	background:#333;
}
#menu a,#menu span{
	line-height:37px;
	height:37px;

}
#menu a{
	display:inline-block;
	text-transform:uppercase;
	text-decoration:none;
	color:#FFF;
}
#menu span{
	position:relative;
	padding:5px 10px;
}
#menu a:hover{
	background:#333;
}

psywalker · August 17, 2011

Вот, держи. Изучи этот код http://psywalker.ru/Forum/Menu/L-Menu/main-page.html

WHITEMAN23 · August 17, 2011

#menu{
	list-style:none;
	margin:0 0 0 550px;
	padding:0 0 0 ;
}
#menu li{
	float:left;
	margin-right:30px;
	position:relative;
}
#menu li ul{
	display:none;
	position:absolute;
	left:0;
}
#menu li:hover ul{
	display: block;
}
#menu li li{
	float:none;
}
#menu li li a{
	display:block;
	background:#f69;
	white-space:nowrap;
}
#menu li li a:hover{
	background:#269;
}
#menu li:hover ul{
	display: block;
}
#menu li a{
	display:inline-block;
	height:39px;
	line-height:39px;
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;
	padding:0 20px;
}
#menu span{
	position:relative;
	left:10px;
}
#menu li a:hover{
	background:#333;
}

Вот реализация самого меню но почему то оно не отображается в аккурат под словом о нас а Посередине и его перекрывает блок float_news

psywalker · August 17, 2011

WHITEMAN23,

Сделай тестовую страницу с примером.

WHITEMAN23 · August 17, 2011

Вот собственно пример http://jsfiddle.net/WHITEMAN23/Pdjcf/

В блоке розового цвета я планировал разместить флэш

Внизу новости.

Сейчас столкнулся с 2мя проблемами 1. Горизонтальная полоса прокрутки.

2. При заполнении блока контент он упорно заползает на футер.

Softlink · August 18, 2011

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

По футерам посмотрите здесь http://forum.htmlbook.ru/index.php?showtopic=5870 Очень много информации.

WHITEMAN23 · August 19, 2011

Ещё раз здравствуйте. Сейчас выложил архив с тем что у меня получилось на mail http://files.mail.ru/RZIAGP

Прошу адекватной критики и советов по исправлению.

П.С. можно ли будет в дальнейшем этот файл сделать как шаблон joomla или др CMS

Softlink · August 20, 2011

Ещё раз здравствуйте. Сейчас выложил архив с тем что у меня получилось на mail http://files.mail.ru/RZIAGP
Прошу адекватной критики и советов по исправлению.
П.С. можно ли будет в дальнейшем этот файл сделать как шаблон joomla или др CMS

Ну вот думаете интересно качать архив, чтобы просто посмотреть вашу работу? Залейте на какой-нибудь хостинг и поди чего-нибудь дождетесь.

WHITEMAN23 · September 4, 2011

Залил на бесплатный хостинг http://greed.hut2.ru/

Не могу понять что со шрифтами.

Так же если можно скажите что нужно исправить в самой структуре.

И возможно ли будет посадить это дело на cms

Shader · September 4, 2011

Крокозябры от того, что вы кодировали с BOM в UTF-8. Перекодируйте в нотепаде++ (кодировки-->кодировать в утф-8 без БОМ)

Если и это не поможет, то создайте на хосте файл с именем .htaccess и туда впишите AddDefaultCharset utf-8

Учтите тот факт, что на хостинге должна быть включена поддержка php, но на вашем я сомневаюсь, что "такое 8 чудо света" есть.

WHITEMAN23 · September 4, 2011

Ну это я использовал чтобы вы могли посмотреть. А что по поводу структуры и посадки на cms.

Возможно ли будет посадить это дело на cms и какую предпочесть?

WHITEMAN23 · September 6, 2011

Ну так кто-нибудь может помочь советом и сказать реально ли посадить этот сайт на cms joomla

К сожалению никак не могу разобраться с отображения, тк кодировку использовал без BOM и на хостинге добалвлял её.

Вот архив с сайтом http://files.mail.ru/VB8VF1

На хостинге он выложен по ссылке выше

WHITEMAN23 · September 8, 2011

Народ я конечно понимаю, что лучше бы я выложил на бесплатный хостинг но у меня щас запара с этим Кто может скажите тяжело ли будет посадить на движок все это дело

WHITEMAN23 · September 12, 2011

Переделал код с новыми тегами http://jsfiddle.net/WHITEMAN23/erusB/1/ (почемуто тут расползается все)

Вот архив 256кб со всеми файлами http://files.mail.ru/J39VL4 (работает везде кроме IE)

Собственно вопрос как сделать что бы заработало в IE (скрипт вроде вставил)

. Ну и что следовало бы изменить в html и css

WHITEMAN23 · September 12, 2011

Залил сайт на хостинг, но до сих пор не понял как решить проблему с IE http://teamgreed.ru.swteh.ru

Sign In

Всплывающее меню

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information