Помогите создать всплывающее меню!

La_Perm · March 23, 2011

Не то, чтоб я вообще не знаю, как это сделать, но запуталась в тегах. Итак, исходный css файл был таким

body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background:url(images/body.jpg) repeat-x #F7FFC4; padding-bottom:10px;}
a {color:#deff00; text-decoration:none;}
a:hover {text-decoration:underline;}

#container {background:url(images/main_bckg.jpg) center top no-repeat; width:980px; margin:0 auto;}

#logo {margin:0 90px 0 110px; background:url(images/logo_bckg.jpg) no-repeat #4A730B; padding:43px 0 69px 0; text-align:center;}
#logo a {color:#FFFFFF; text-decoration:none; text-transform:uppercase; font-size:20px; font-weight:bold;}
#menu {margin:0 90px 0 110px; height:28px; background:url(images/menu_bckg.jpg) no-repeat #102C04; padding:17px 0 0 30px;}
#menu a {color:#FFFFFF; font-size:14px; padding:9px 10px; text-decoration:none; text-transform:lowercase;}
#menu a:hover {background:url(images/menu_over.jpg) bottom center no-repeat;}

#main {margin:0 90px 0 110px; background:url(images/content_bckg.jpg) no-repeat #8EB002; float:left; min-height:420px; display:inline;}
#text {margin:30px 240px 0px 40px;}
#text ul {padding:0; margin:10px 0 10px 40px;}
#text li {list-style:none; padding-left:15px; background:url(images/li.gif) no-repeat 0px 7px;}
h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal;}
#text p {margin:10px 0;}
#sidebar {float:right; width:160px; padding:0 40px 0 50px; margin-top:50px;}
#sidebar h2 {font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:18px; font-weight:normal;}
#sidebar ul {margin:20px 0; padding:0;}
#sidebar li {list-style:none; padding:3px 0 3px 10px;}
#sidebar li:hover {background-color:#2d5004;}
#sidebar a {text-decoration:none; color:#deff00;}

#footer {margin:0 90px 0 110px; clear:both; background:url(images/footer_bckg.jpg) center top repeat-x; height:89px; padding:53px 40px 0 40px;}
#menu_footer {font-size:11px;}
#menu_footer a {color:#FFFFFF; text-transform:lowercase;}
#left_footer {float:left; font-size:11px; margin-top:30px;}
#left_footer a {color:#FFFFFF;}
#right_footer {float:right; font-size:11px; margin-top:30px;}

Сейчас он выглядит вот так:

body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background:url(images/body.jpg) repeat-x #F7FFC4; padding-bottom:10px;}
a {color:#ffffff; text-decoration:none;}
a:hover {text-decoration:none;}

#container {background:url(images/main_bckg.jpg) center top no-repeat; width:980px; margin:0 auto;}

#logo {margin:0 110px 0 110px; background:url(images/logo_bckg.jpg) no-repeat #4A730B; padding:43px 0 69px 0; text-align:center;}
#logo a {color:#f19fc1; text-decoration:none; text-transform:uppercase; font-size:20px; font-weight:bold;}
#menu {margin:0 110px 0 110px; height:28px; background:url(images/menu_bckg.jpg) no-repeat #f19fc1; padding:17px 0 0 30px;}
#menu a {color:#f19fc1; font-size:14px; padding:9px 10px; text-decoration:none; text-transform:lowercase;}
#menu a:hover {background:url(images/menu_over.jpg) bottom center no-repeat;}

.dropmenu ul {
margin: 0;
padding: 0;
list-style: none;
width: 80px;
}
ul li {
position: relative;
border: 0px ;
padding:0px;
}
*+html ul li { float: left; }
*+html ul li { width: 10%; }
li ul {
position: absolute;
left: 0px;
top: 29px;
display: none;
width: 79px;
}
ul li a {
display: block;

}
ul li a:hover {
display: block;

}
li:hover ul {
display: block;
}

#main {margin:0 110px 0 110px; background:url(images/content_bckg.jpg) no-repeat #8EB002; eft; min-height:420px;}
#text {margin:0px 140px 0px 40px;}

h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal;}
#text p {margin:10px 0;}


#footer {margin:0 110px 0 110px; clear:both; background:url(images/footer_bckg.jpg) center top repeat-x; height:89px; padding:53px 40px 0 40px;}
#menu_footer {font-size:11px;}
#menu_footer a {color:#FFFFFF; text-transform:lowercase;}
#left_footer {float:left; font-size:11px; margin-top:30px;}
#left_footer a {color:#FFFFFF;}
#right_footer {float:right; font-size:11px; margin-top:30px;}

Я добавила в css дропменю для всплывающего меню. Сейчас html страничка выглядит вот так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id="container"> 
    	<!-- header -->
        <div id="logo"><a href="#">      </a></div>
        <div id="menu">
		<a href="#">Главная</a>
            <a href="#">О нас </a>
            <a href="#">Сервис</a>
            <a href="#">Цены</a>
            <a href="#">Контакты</a>
        </div>
        <!--end header -->
        <!-- main -->
        <div id="main">
          <div id="text" >
		  <table border="0" cellspacing="13">
		  <tr>
		  <td>
                 <img src="foto/wed_neves_9s.jpg" width="174" height="174"></td>
			<td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td>
		 <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td>
		 </tr>
		 <tr>
		 <td><img src="foto/wed_neves_11s.jpg" width="174" height="174" /></td>
		 <td><img src="foto/wed_neves_12s.jpg" width="174" height="174" /></td>
		 <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td>
		 </tr>
		 <tr>
		 <td><img src="foto/wed_neves_13s.jpg" width="174" height="174" /></td>
		 <td><img src="foto/wed_neves_14s.jpg" width="174" height="174" /></td>
		 <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td>
		 </tr>
		 <tr>
		 <td><img src="foto/wed_neves_15s.jpg" width="174" height="174" /></td>
		 <td><img src="foto/wed_neves_16s.jpg" width="174" height="174" /></td>
		 <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td>
		 </tr>
		 <tr>
		 <td colspan="3" align="center"><a href="wedding.html">1</a> | 2 | <a href="wedding-3.html">3</a></td>
		 </tr>
				 </table> 
          </div>
    </div>
    <!-- end main -->
    <!-- footer -->
    <div id="footer">
            <div id="menu_footer"><a href="#">home</a> | <a href="#">about</a> | <a href="#">products</a> |  <a href="#">services</a> | <a href="#">pricing</a> | <a href="#">contact</a> | <a href="#">sitemap</a> | <a href="#">testimonials</a> | <a href="#">etc.</a></div>
            <div id="left_footer">© Copyright 2008 <strong>Your Website</strong></div>
            <div id="right_footer">


Design by <a href="http://www.realitysoftware.ca" title="Web Design"><strong>Reality Software</strong></a> & <a href="http://www.flashmp3player.org" title="Free Flash MP3 Player"><strong>Flash Music Player</strong></a>
			<div style="display:none;"><a href="http://csstemplatesfree.net">free website templates for free</a></div>
             </div>
    </div>
    <!-- end footer -->
</div>
</body>

Итак, требуется, чтобы при наведении на ссылки Главная, о нас, Сервис, цены, контакты появлялось подменю из 3 ссылок. Подменю должно всплывать, не справа от основного меню, а под ним, то есть - под Главная подменю из 3 ссылок, под О нас подменю из 3 ссылок и т.д. Скажу сразу, что пробовала действовать так, как написано здесь http://www.seomark.ru/dropmenu.html# но запуталась в тегах совершенно. Потому прошу помощи.

Основное меню должно быть таким (см. верх картинки, т.к. боковых сайдбаров в моей переделке не предусмотрено)

rus · March 23, 2011

а где в меню теги <ul><li>?

La_Perm · March 23, 2011

Они были но я их убрала потому что запуталась. когда делаю теги списка то у меня меню немного вниз скатывается а мне этого не надо. Мне надо, чтоб основное меню было так, как есть сейчас, а из под него подменю вылезало.

rus · March 23, 2011

смысл примерно такой:

<ul>

<ul>

<li><a href="">субменю</a></li>

</ul>

</li>

</ul>

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

понятно? если нет, то фаербаг для мозилы в руки и вперед разбирать тот пример что вы привели по ссылке.

La_Perm · March 23, 2011

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

<ul id="cssmenu">
<li><a href="#">Главная</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">О нас</a>
<ul>                         
<li><a href="#">Ссылка 1</a></li>                         
<li><a href="#">Ссылка 2</a></li>                 
</ul>         
</li> 		             
<li><a href="#">Сервис</a>                 
<ul>                         
<li><a href="#">Ссылка 1</a></li>                         
<li><a href="#">Ссылка 2</a></li>
</ul></li>         
<li><a href="#">Цены</a>                 
<ul><li><a href="#">Ссылка 1</a></li>                         
<li><a href="#">Ссылка 2</a></li>                         
<li><a href="#">Ссылка 3</a></li>                         
<li><a href="#">Ссылка 4</a></li>                         
<li><a href="#">Ссылка 5</a></li></ul></li>         
<li><a href="#">Контакты</a>                 
<ul>                         
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li></ul></li> </ul>

И вот кусок css


ul#cssmenu 
{width:auto; 	
margin: 0; 	
border: 0 none; 	
padding: 0;   	
list-style: none; 	
background: none;   	
height: 20px; 
}  
ul#cssmenu li { 	
margin: 0; 	
border: 0 none; 	
padding: 0; 	
float: left; 	
display: inline; 	
list-style: none; 	
position: relative; 	
height: 20px; 
}  
ul#cssmenu ul { 	
margin: 0; 	
border: 0 none; 	
padding: 0; 	
width: 200px; 	
list-style: none; 	
display: none; 	
position: absolute; 	
top: 20px; 	
left: 0; 
}  
ul#cssmenu ul:after { 	
clear: both; 	
display: block; 	
font: 1px/0px serif; 	
content: "."; 	
height: 0; 	
visibility: hidden; 
}  
ul#cssmenu ul li { 	
width: 150px; 	
float: left; 	
display: block !important; 	
display: inline; 
}  
/* Main Menu */ 
ul#cssmenu a { 	
border: 0px; 	
padding: 0 10px; 	
float: none !important; 	
float: left; 	
display: block; 	
background: none; 	
color: #f19fc1; 	
font: bold 12px/28px Verdana, Arial; 	
text-decoration: none; 	
height: auto !important; 	
height: 1%; 
}  
/* Main Menu Hover */ 
ul#cssmenu a:hover, ul#cssmenu li:hover a, ul#cssmenu li.iehover a { 	background: #2d5004; 	color:none; }  /* Second Menu */ ul#cssmenu li:hover li a, ul#cssmenu li.iehover li a { 	float: none; 	background: none; 	color: #f19fc1; }  /* Second Menu Hover */ ul#cssmenu li:hover li a:hover, ul#cssmenu li:hover li:hover a, ul#cssmenu li.iehover li a:hover, ul#cssmenu li.iehover li.iehover a { 	background: #2d5004; 	color:none; }  ul#cssmenu ul ul { 	display: none; 	position: absolute; 	top: 0; 	left: 170px; }  ul#cssmenu li:hover ul ul, ul#cssmenu li.iehover ul ul { 	display: none; }  ul#cssmenu li:hover ul, ul#cssmenu ul li:hover ul, ul#cssmenu li.iehover ul, ul#cssmenu ul li.iehover ul { 	display: block; }

Что я опять не так сделала? У меня все открывается как надо, но шрифт в меню одного размера. То есть я в дримвьювере меню делаю с заглавной буквы, а фаерфокс его показывает со строчной. ПОЧЕМУ?надо "Главная", а он показывает "главная"

Edited March 23, 2011 by La_Perm

rus · March 23, 2011

у меня все гуд:

La_Perm · March 23, 2011

А еще в иксплорере косяк, курсор на первое подменю навожу, а до второго не доезжаю((( подменю пропадает. Знаю, что такое бывает, когда промежутки между пунктами большие, но в фаерфоксе такого нет. вставила ссылку <script src="cssmenujs.js"> </script> а сам скрипт такой


function cssmenuhover() 
{ 	
if(!document.getElementById("cssmenu")) 		
return; 	
var lis = document.getElementById("cssmenu").getElementsByTagName("LI"); 	
for (var i=0;i<lis.length;i++) 	{ 		
lis[i].onmouseover=function(){this.className+=" iehover";} 		
lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");} 	} } 
if (window.attachEvent) 	
window.attachEvent("onload", cssmenuhover);

rus · March 23, 2011

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

Sign In

Помогите создать всплывающее меню!

Question

La_Perm

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

La_Perm

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

La_Perm

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

La_Perm

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information