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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 372 3 темы, 22 сообщения, 8 баллов репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография bor10811
    #10

    bor10811
    Очков активности: 15 2 темы, 4 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 19.08.2018
Топ 5 участников по репутации


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

#1 tvman

tvman
  • Неактивные
  • 1 сообщений
  • Репутация: 0
0

Отправлено 17 January 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

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как Показывать на своей html странице чужую
  2. Разбор основных инструментов для разработчика сайтов
  3. Как вынести Javascript код в отдельный файл
  4. Можно заключать javascript в <div>
  5. Не понятная ошибка JS при оптимизации WP под PageSpeed Insights

#2 yury

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

Отправлено 17 January 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
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 18 January 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