Перейти к содержимому



Помогите с CSS или JavaScript

#1 tvman

tvman
  • Пользователь
  • 1 сообщений
  • Репутация: 0
0

Отправлено 17 Январь 2013 - 08:52

Вообще нужно сделать так чтобы класс SubMenu показывался только при наведение на Helps.png или надпись "пункт 2", а в остальное время был скрыт
файл DesignStyle.css
@font-face {
    font-family: 'Micra';
    src: url('Micra/micra.eot');
    src: url('Micra/micra.eot?#iefix') format('embedded-opentype'),
		 url('Micra/micra.woff') format('woff'),
		 url('Micra/micra.ttf') format('truetype'),
		 url('Micra/micra.svg#Micra') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* REFLECT */
.reflect
{
    position: relative;
}
.img_Reflect
{   
    position: relative;
}
.Text_Reflect
{   
    position: relative;
}


body
{
    background-color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
}
p
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #666666;
    line-height: 20px;
    text-align: left;
    text-indent: 0px;
    padding: 0px;
    margin: 0px 10px 10px 10px;
}
div
{
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    display: block;
    float: left;
    border-collapse: collapse;
}
p.FontMicra
{
    font-family: 'Micra';
    color: #6A2300;
    text-transform: uppercase;
}
p.SmallHeightLine
{
    padding: 0px;
    margin: 0px;
    line-height: 15px;
    text-align: center;
    font-size: 11px;
}

div.MainBlock
{
    padding: 0px;
    margin: 0px auto 0px auto;
    width: 960px;
    min-height: 450px;
    display: block;
    float: none;
    border: 0px solid red;
}
div.Logo
{
    height: 154px;
    width: 960px;
    margin: 89px 0px 20px 0px;
    padding: 0px;
    background-image: url('../Images/Logo.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
}
div.Ico
{
    padding: 0px;
    margin: 20px 36px 0px 0px;
    width: 64px;
    height: 64px;
}
div.IcoText
{
    padding: 5px 0px 0px 0px;
    margin: 25px 16px 0px 0px;
    width: 84px;
    height: 30px;
}
div.IcoTextGray
{
    border: 0px inset #808080;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
   
    background: #f6e6b4; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZTZiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iI2NjNjMxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOTg2NDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #f6e6b4 0%, #cc631e 55%, #e98643 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(55%,#cc631e), color-stop(100%,#e98643)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f6e6b4 0%,#cc631e 55%,#e98643 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f6e6b4 0%,#cc631e 55%,#e98643 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f6e6b4 0%,#cc631e 55%,#e98643 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f6e6b4 0%,#cc631e 55%,#e98643 100%); /* W3C */
}
div.IcoTextGraySimple
{
    border: 0px inset #808080;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
   
    background: #e98643; 
}
div.SubMenu
{
    border: 1px solid #e98643;
    width: 462px;
    min-height: 150px;
    display: block;
    float: left;
    margin-left: 248px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
div.IcoSubMenu
{
    padding: 0px;
    margin: 20px 45px 0px 45px;
    width: 64px;
    height: 64px;
}
div.IcoTextSubMenu
{
    padding: 0px;
    margin: 25px 20px 0px 20px;
    width: 114px;
    height: 30px;
    text-align: center;
    border:0px solid red;
}
файл index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
	    Агентство интернет-рекламы. Услуги
    </title>
    <link href="Styles/DesignStyle.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <script type="text/javascript" src="Scripts/MainScript.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery.reflect-0.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.reflect.js"></script>
    <!--[if lt IE 9]>
	    <style type="text/css" rel="stylesheet">
		    .IcoTextGray {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#e98643',GradientType=0 ); /* IE6-8 */}
	    </style>
    <![endif]-->
</head>
    <body>
	    <div class="MainBlock">
		    <div class="Logo">
		    </div>
		    <div style="width: 960px; margin-bottom: 25px;">
			    <p class="FontMicra" style="text-align: center; font-size: 16px;">
				   Заголовок
			    </p>
		    </div>
		    <div class="Ico" style="margin-left: 248px">
			    <img src="Images/Icons/About.png" height="64" width="64" class="img_Reflect" />
		    </div>
		    <div class="Ico">
			    <img src="Images/GrayIcons/Helps.png" height="64" width="64" class="img_Reflect" />
		    </div>
		    <div class="Ico">
			    <img src="Images/Icons/Sale.png" height="64" width="64" class="img_Reflect" />
		    </div>
		    <div class="Ico">
			    <img src="Images/Icons/Works.png" height="64" width="64" class="img_Reflect" />
		    </div>
		    <div class="Ico" style="margin-right: 248px">
			    <img src="Images/Icons/Actions.png" height="64" width="64" class="img_Reflect" />
		    </div>
		    <div class="IcoText" style="margin-left: 238px">
			    <p class="FontMicra" style="text-align: center; font-size: 12px;">
				    пункт 1
			    </p>
		    </div>
		    <div class="IcoText IcoTextGraySimple">
			    <p class="FontMicra" style="text-align: center; font-size: 12px; color:white">
					 пункт 2
			    </p>
		    </div>
		    <div class="IcoText">
			    <p class="FontMicra" style="text-align: center; font-size: 12px;">
				    пункт 3
			    </p>
		    </div>
		    <div class="IcoText">
			    <p class="FontMicra" style="text-align: center; font-size: 12px;">
					 пункт 4
			    </p>
		    </div>
		    <div class="IcoText" style="margin-right: 238px">
			    <p class="FontMicra" style="text-align: center; font-size: 12px;">
				    пункт 5
			    </p>
		    </div>
		    <div class="SubMenu">
			    <div class="IcoSubMenu">
				    <img src="Images/Icons/CreateSite.png" height="64" width="64" class="img_Reflect" />
			    </div>
			    <div class="IcoSubMenu">
				    <img src="Images/Icons/UpRating.png" height="64" width="64" class="img_Reflect" />
			    </div>
			    <div class="IcoSubMenu">
				    <img src="Images/Icons/Support.png" height="64" width="64" class="img_Reflect" />
			    </div>
			    <div class="IcoTextSubMenu">
				    <p class="FontMicra SmallHeightLine">
						 подпункт 1
				    </p>
			    </div>
			    <div class="IcoTextSubMenu">
				    <p class="FontMicra SmallHeightLine">
						 подпункт 2
				    </p>
			    </div>
			    <div class="IcoTextSubMenu">
				    <p class="FontMicra SmallHeightLine">
						 подпункт 3
				    </p>
			    </div>
		    </div>
	    </div>
   
	   
    </body>
</html>

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 17 Январь 2013 - 14:31

tvman,
есть подозрение, что вам нужно что-то вроде такого:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<style type='text/css'>
*{
  padding: 0px;
  margin: 0px;
}
ul#menu{
  list-style: none;
  overflow: hidden;
  margin: 0 auto;
  width: 480px;
}
ul#menu li{
  float: left;
  margin: 0 1em;
}
ul#menu li a{
  text-decoration: none;
  display: block;
  text-align: center;
}
ul#menu li a span{
  color: #6a2300;
  text-transform: uppercase;
  font: 14px/20px Arial, Helvetica, sans-serif;
  display: block;
  padding: 0.5em;
	border: 0px inset #808080;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
ul#menu li a:hover span{
  color: #fff;
  background: #c60;
}

ul#menu li a img{
  display: block;
  background: #ccc;
  width: 64px;
  height: 64px;
  margin: 0 auto 1em auto;
}

div.SubMenu
{
  margin: 0 auto;
  border: 1px solid #e98643;
  width: 480px;
  min-height: 150px;
  display: block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: none;
}
</style>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
  $("#helps a").hover(function() {
	$('#sm_helps').css('display', 'block');
  }, function() {
	$('#sm_helps').css('display', 'none');
  });
  $("#sales a").hover(function() {
	$('#sm_sales').css('display', 'block');
  }, function() {
	$('#sm_sales').css('display', 'none');
  });
  $("#works a").hover(function() {
	$('#sm_works').css('display', 'block');
  }, function() {
	$('#sm_works').css('display', 'none');
  });
  $("#actions a").hover(function() {
	$('#sm_actions').css('display', 'block');
  }, function() {
	$('#sm_actions').css('display', 'none');
  });
});
</script>
</head>
<body>
<ul id="menu">
  <li id="helps">
	<a href="#"><img src="helps.png" alt="helps img" /><span>helps</span></a>
  </li>
  <li id="sales">
	<a href="#"><img src="sales.png" alt="sales img" /><span>sales</span></a>
  </li>
  <li id="works">
	<a href="#"><img src="works.png" alt="works img" /><span>works</span></a>
  </li>
  <li id="actions">
	<a href="#"><img src="actions.png" alt="actions img" /><span>actions</span></a>
  </li>
</ul>
<div class="SubMenu" id="sm_helps">
  Sub menu for helps item
</div>
<div class="SubMenu" id="sm_sales">
  Sub menu sales
</div>
<div class="SubMenu" id="sm_works">
  Sub menu for works
</div>
<div class="SubMenu" id="sm_actions">
  Actions submenu
</div>

</body>
</html>
Хотя я бы делал картинки иконок для меню не через img, а через фоновое изображение ссылок, соответственно и менял бы его (фон) с помощью CSS-свойства a:hover
  • 0

#3 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 18 Январь 2013 - 16:40

Поправил немного. А то блок всплывающего подменю пропадал, когда на него курсор мыши перемещался.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<style type='text/css'>
*{
  padding: 0;
  margin: 0;
}
ul#menu{
  width: 462px;
  margin: 0 auto;
  list-style: none;
  position: relative;
  z-index: 1;
}
ul#menu li{
  float: left;
  margin: 0 1em;
}
ul#menu li a{
  text-decoration: none;
  display: block;
  text-align: center;
}
ul#menu li a span{
  color: #6a2300;
  display: block;
  margin-top: 1em;
  padding: 0.5em;
  border: 0px inset #808080;
  text-transform: uppercase;
  font: 14px/20px Arial, Helvetica, sans-serif;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
ul#menu li a:hover span{
  color: #fff;
  background: #c60;
}

ul#menu li a img{
  display: block;
  background: #ccc;
  width: 64px;
  height: 64px;
}
ul#menu li .SubMenu{
  position: absolute;
  left: 0;
  border: 1px solid #e98643;
  width: 462px;
  min-height: 150px;
  display: block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: none;
}
</style>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
  $('#menu li').hover(function() {
    $('#'+this.id+' .SubMenu').css('display', 'block');
  }, function() {
	$('#'+this.id+' .SubMenu').css('display', 'none');
  });
});
</script>
</head>
<body>
<ul id="menu">
  <li id="helps">
	<a href="#"><img src="helps.png" alt="helps img" /><span>helps</span></a>
	<div class="SubMenu">
	  Sub menu for helps item
	</div>
  </li>
  <li id="sales">
	<a href="#"><img src="sales.png" alt="sales img" /><span>sales</span></a>
	<div class="SubMenu">
	  Sub menu sales
	</div>
  </li>
  <li id="works">
	<a href="#"><img src="works.png" alt="works img" /><span>works</span></a>
	<div class="SubMenu">
	  Sub menu for works
	</div>
  </li>
  <li id="actions">
	<a href="#"><img src="actions.png" alt="actions img" /><span>actions</span></a>
	<div class="SubMenu">
	  Actions submenu
	</div>
  </li>
</ul>
</body>
</html>

  • 1


Оформление форума – IPBSkins.ru