Jump to content
  • 0

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

La_Perm

Asked by La_Perm,

 Share

Question

La_Perm Explorer

La_Perm

Posted
Posted

Не то, чтоб я вообще не знаю, как это сделать, но запуталась в тегах. Итак, исходный 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# но запуталась в тегах совершенно. Потому прошу помощи.

x_7370a3da.jpg

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

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
La_Perm Explorer

La_Perm

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

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

<ul>

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

<ul>

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

</ul>

</li>

</ul>

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

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

Link to comment
Share on other sites
  • 0
La_Perm Explorer

La_Perm

Posted
  • Author
Posted (edited)

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

<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 by La_Perm
Link to comment
Share on other sites
  • 0
La_Perm Explorer

La_Perm

Posted
  • Author
Posted

А еще в иксплорере косяк, курсор на первое подменю навожу, а до второго не доезжаю((( подменю пропадает. Знаю, что такое бывает, когда промежутки между пунктами большие, но в фаерфоксе такого нет. вставила ссылку <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);

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept