>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Как сделать так чтобы выдвигался только один пункт?

Голоса: +1 
<style>  
#accordion .item {  
  width: 400px;  
  overflow: hidden;  

  border: 1px solid #ccc;  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
   
  margin-bottom: 2px;  
  }  
  #accordion h3 {cursor: pointer;  
  display: block;  
  height: 20px;  
  line-height: 20px;  
  margin: 0px 0px 5px 0px;  
  background: #e6e6e6;  
  padding: 5px;  
  color: #1e1e1e;  
  text-decoration: none;  
  }  
  #accordion p {  
  height: 150px;  
  padding: 5px;  
  }  
  #accordion div:hover h3 {  
  border-bottom: 1px solid #ccc;  
  font-weight: bold;  
  }  

  .aleft {  
  float:left;  
  width:90px;  
  }  
  .aright {  
  float:left;  
  width:90px;  
  }  
  .arsip li {  
  float: left;  
  width: 120px;  
  }  
  .clearfix {  
  display: inline-block;  
  }  

  #accordion .item {  
  transition: height ease-in-out 500ms;  
  -o-transition: height ease-in-out 500ms;  
  -moz-transition: height ease-in-out 500ms;  
  -webkit-transition: height ease-in-out 500ms;  
  }  
  #accordion div:hover {  
  height: 180px;  
  }  

  #accordion .item {  
  width: 210px;  
  height: 30px;  
  overflow: hidden;  
   
  transition: height ease-in-out 500ms;  
  -o-transition: height ease-in-out 500ms;  
  -moz-transition: height ease-in-out 500ms;  
  -webkit-transition: height ease-in-out 500ms;  
   
  border: 1px solid #ccc;  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
   
  margin-bottom: 2px;  
  }  
  #accordion h3{  
  display: block;  
  height: 20px;  
  line-height: 20px;  
   
  background: #e6e6e6;  
  padding: 5px;  
  color: #1e1e1e;  
  text-decoration: none;  
  }  
  #accordion p {  
  height: 150px;  
  padding: 5px;  
  }  
  #accordion div:hover {  
  height: 180px;  
  }  
  #accordion div:hover h3 {  
  border-bottom: 1px solid #ccc;  
  font-weight: bold;  
  } 

#u-mast {  
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;  
-webkit-box-shadow: 0px 0px 1px 1px #cccccc; 
-moz-box-shadow: 0px 0px 1px 1px #cccccc; 
box-shadow: 0px 0px 1px 1px #cccccc; 
width:85%;padding: 2px; 
text-decoration: none; 
display: block;margin-bottom:7px;margin-top: 7px;  
background: #ffffff; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yM 
DAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9u 
ZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI 
geDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZi 
Igc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0e 
T0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJs 
KCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 

background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); 
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); 
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); 
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); 
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); 
} 

#u-mast:hover {  
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;  
-webkit-box-shadow: 0px 0px 1px 1px #cccccc; 
-moz-box-shadow: 0px 0px 1px 1px #cccccc; 
box-shadow: 0px 0px 1px 1px #cccccc; 
background: #e5e5e5; 
} 

</style>  

<div id="accordion">  
<div class="item">  
<h3>U-mast.com</h3> 
<center> 
   
<a href="http://u-mast.com/load/template/1" id="u-mast">Шаблоны</a> 
<a href="http://u-mast.com/load/scripts_for_ucoz/15" id="u-mast">Скрипты</a> 
<a href="http://u-mast.com/load/graphics/31" id="u-mast">Графика</a> 
<a href="http://u-mast.com/load/article/37" id="u-mast">Статьи</a> 

</center> 
</div>  
<div class="item">  
  <h3>Шаблоны для ucoz</h3>  
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
  <div class="item">  
<h3>Скрипты для ucoz</h3>  
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
  <div class="item">  
<h3>Графика для сайта</h3> 
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
  <div class="item">  
<h3>Форум</h3>  
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
</div>

 

Адрес сайта qhacker.tk
| Автор: | Категория: Меню сайта

Ответов: 1

Голоса: +1
 
Лучший ответ

Почему один, если в каждом пункте меню имеются вложенные подпункты вот и вспливает при наведении на каждый.

В том случае если вы хотите удалить вложенные подпункты с других пунктов меню, сами смотрим и удаляем вот эту часть кода с каждого пункта:

<center>   
<a href="http://u-mast.com/load/template/1" id="u-mast">Шаблоны</a> 
<a href="http://u-mast.com/load/scripts_for_ucoz/15" id="u-mast">Скрипты</a> 
<a href="http://u-mast.com/load/graphics/31" id="u-mast">Графика</a> 
<a href="http://u-mast.com/load/article/37" id="u-mast">Статьи</a> 
</center>

В общем, в тех пунктах где это лишнее удаляем.

В том случае если нужно удалить вместе с пунктом и вложенными подпунктами, то удаляем конструкцию:

<div class="item">  
<h3>Форум</h3>  
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>

Это как пример для форума, вы уже смотрите сами и решаете, что вам не нужно.

| Автор:
Выбор ответа лучшим | | Автор: Роман
Я хочу что бы при наведение не сплывала окно. Помогите
| Автор:

Если хотите чтобы не всплывало, не используйте сторонние скрипты меню с сети, а выберите один из системных шаблонов где имеется простое и функциональное меню, без всплываний либо гармошек как вот у вас.

Ознакомьтесь:

Чтобы не всплывало, замените:

<div id="accordion">  
<div class="item">  
<h3>U-mast.com</h3> 
<center> 
   
<a href="http://u-mast.com/load/template/1" id="u-mast">Шаблоны</a> 
<a href="http://u-mast.com/load/scripts_for_ucoz/15" id="u-mast">Скрипты</a> 
<a href="http://u-mast.com/load/graphics/31" id="u-mast">Графика</a> 
<a href="http://u-mast.com/load/article/37" id="u-mast">Статьи</a> 

</center> 
</div>  
<div class="item">  
  <h3>Шаблоны для ucoz</h3>  
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
  <div class="item">  
<h3>Скрипты для ucoz</h3>  
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
  <div class="item">  
<h3>Графика для сайта</h3> 
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
  <div class="item">  
<h3>Форум</h3>  
<center> 
   
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 1</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 2</a> 
<a href="http://u-mast.com/load/" id="u-mast">Ссылка 3</a> 

  </center> 
  </div>  
</div>

На:

<div id="accordion">  
<div class="item">  
<h3><a href="ссылка на пункт меню">U-mast.com</a></h3></div>  
<div class="item">  
  <h3><a href="ссылка на пункт меню">Шаблоны для ucoz</a></h3></div>  
  <div class="item">  
<h3><a href="ссылка на пункт меню">Скрипты для ucoz</a></h3></div>  
  <div class="item">  
<h3><a href="ссылка на пункт меню">Графика для сайта</a></h3></div>  
  <div class="item">  
<h3><a href="ссылка на пункт меню">Форум</a></h3></div>  
</div>
| Автор:
...