Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню


Создаем выплывающее меню

Сообщений 41 страница 60 из 144

41

Romych написал(а):

для работы меню требуется наличие jQuery

Здраствуйте! а объясните как это установить, раз требуется наличие?

0

42

и не подскажите как меню перемещать....чтоб оно у меня повыше было....на шапку залезало
вот форум http://truecstest.mybb.ru/

0

43

извините за мою тупость...уже все нашел...удалите мои сообщения

0

44

Ещё раз напоминаю, для ВСЕХ!


Этот скрипт более устанавливать не требуется:

Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Теперь он есть на каждом форуме! Если он стоит у Вас в ХТМЛ-верх или ХТМЛ-низ, удалите его.

0

45

rps написал(а):

Этот скрипт более устанавливать не требуется:

А что он дает? Я ничего нового не заметила.

0

46

здраствуйте! Помогите мне....я нашел скрипт меню, и хочу его сделать горизонтальным и переместить на шапку, подскажите какими кодами это поправить? (http://truecstest.mybb.ru/)

Отредактировано loOw (Вс, 19 Сен 2010 17:17:29)

0

47

ладно=) попрошу немного иначе=) помоги  пожалуйста подкорректировать этот код чтоб он стал горизонтальным и заменить им главное меню форума

Код:
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Simple page reset */
	margin:0px;
	padding:0px;
}

body{
	/* Setting default text color, background and a font stack */
	color:#cccccc;
	font-size:13px;
	background: #302b23;
	font-family:Arial, Helvetica, sans-serif;
}

ul{
	margin:0;
	padding:0;
}

ul.container{
	/* The topmost UL */
	width:240px;
	margin:0 auto;
	padding:50px;
}

li{
	list-style:none;
	text-align:left;
}

li.menu{
	/* The main list elements */
	padding:5px 0;
	width:100%;
}

li.button a{
	/* The section titles */
	display:block;
	font-family:BPreplay,Arial,Helvetica,sans-serif;
	font-size:21px;
	height:34px;
	overflow:hidden;
	padding:10px 20px 0;
	position:relative;
	width:200px;
}

li.button a:hover{
	/* Removing the inherited underline from the titles */
	text-decoration:none;
}

li.button a span{
	/* This span acts as the right part of the section's background */
	height:44px;
	position:absolute;
	right:0;
	top:0;
	width:4px;
	display:block;
}

/* Setting up different styles for each section color */

li.button a.blue{background:url(img/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(img/blue.png) repeat-x top right;}

li.button a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(img/green.png) repeat-x top right;}

li.button a.orange{background:url(img/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(img/orange.png) repeat-x top right;}

li.button a.red{background:url(img/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(img/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
	/* The expandable lists */
	display:none;
	padding-top:5px;
	width:100%;
}

.dropdown li{
	/* Each element in the expandable list */
	background-color:#373128;
	border:1px solid #40392C;
	color:#CCCCCC;
	margin:5px 0;
	padding:4px 18px;
}


/* The styles below are only necessary for the demo page */

h1{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-bottom:15px;
}

h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	padding-right:140px;
	right:0;
	text-align:right;
	text-transform:uppercase;
	top:15px;
}

.clear{
	clear:both;
}

#main{
	/* The main container */
	margin:15px auto;
	text-align:center;
	width:920px;
	position:relative;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

p{
	/* The tut info on the bottom of the page */
	padding:10px;
	text-align:center;
}
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="main">

  
  <ul class="container">
      <li class="menu">
      
          <ul>
    <li class="button"><a href="#" class="green">Kiwis <span></span></a></li>

            <li class="dropdown">
                <ul>
                    <li><a href="#" onclick="$('.button a').eq(2).click();return false;">Open Grapes Section</a></li>
                    <li><a href="#" onclick="$('.dropdown').slideUp('slow');return false;">Close This Section</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
                    <li><a href="http://www.flickr.com/search/?w=all&amp;q=kiwi&amp;m=text">Flickr Stream</a></li>
                </ul>
	</li>

          </ul>
          
      </li>
      
      <li class="menu">
      
          <ul>
    <li class="button"><a href="#" class="orange">Oranges <span></span></a></li>          	

            <li class="dropdown">
                <ul>
                    <li><a href="#" onclick="$('.button a:last').click();return false;">Open Last Section</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Orange_%28fruit%29">Wikipedia Page</a></li>
                    <li><a href="http://www.flickr.com/search/?w=all&amp;q=oranges&amp;m=text">Flickr Photos</a></li>
                </ul>
	</li>

          </ul>
          
      </li>

      
      <li class="menu">
      
          <ul>
    <li class="button"><a href="#" class="blue">Grapes <span></span></a></li>

            <li class="dropdown">
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/Grapes">Wiki page</a></li>
                    <li>Text label 1</li>
                    <li>Text label 2</li>
                    <li><a href="http://www.flickr.com/search/?w=all&amp;q=grapes&amp;m=text">Flickr Stream</a></li>
                </ul>
	</li>

          </ul>
          
      </li>

    
      <li class="menu">
      
          <ul>
    <li class="button"><a href="#" class="red">Strawberries <span></span></a></li>

            <li class="dropdown">
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/Strawberry">Wiki page</a></li>
                    <li><a href="http://www.flickr.com/photos/mojeecat/368540120/">Strawberry Pie</a></li>
                    <li><a href="http://www.flickr.com/search/?w=all&amp;q=strawberries&amp;m=text">Photo Stream</a></li>
                </ul>
	</li>

          </ul>
          
      </li>
  </ul>

<div class="clear"></div>

</div>

0

48

Установил Выпадающее главное меню. v3. В целом всё нормально, но, никак не удаётся добиться желаемого результата
1. Пункты меню(Форум, участники, поиск, профиль и т.д.) у меня на разных уровнях. Также хотелось бы, чтоб пункты отражались не CapLooks, а просто начинались с большой буквы
2. Хотелось бы, чтоб верхний срез выпадающего меню находился на уровне нижнего среза самого меню. По возможности туда же и треуголники перенести
3. Не удалось внедрить 2-й вариант(Звуковой) Системы оповещения о новом личном сообщении
4. Всплывающее меню у меня залазит под плеер

Вот скрин
http://savepic.net/235254.png

Html верх(Низ не трогал

Код:
<style type="text/css">
	#pun-navlinks.section{
display: block;
position: relative;
                z-index: 1000;
left: 0em;
                opacity: 1;  
                filter: alpha(opacity=90); 
                    	}
	#pun-navlinks.section ul.container {
margin: 0px;
border: 0px;
padding: 0px;
                      width: 800px; /*For KHTML*/
list-style: none;
height: 38px;
	}
	#pun-navlinks.section ul.container, #pun-navlinks.section ul.container * {z-index: 1000;}
	#pun-navlinks.section ul.container li {
margin: 18px 0px 0px 0px;
padding: 0px;
border: 0px;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 12px;
	}

	#pun-navlinks.section ul.container ul {
margin: 0px;
border: 0px;
padding: 0px 0px 12px 0px;
width: 155px;
list-style: none;
display: none;
position: absolute;
top: 15px;
left: -5px;
background-image: url(http://savepic.net/207547.gif);
background-repeat: no-repeat;
background-position: 0 bottom;
	}

	#pun-navlinks.section ul.container ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: bold 11px Verdana;
content: ".";
height: 0;
visibility: hidden;
	}

	#pun-navlinks.section ul.container ul li {
width: 155px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
	}

	/* Root Menu */
	#pun-navlinks.section ul.container a {
	-x-system-font:none;
	background-attachment:scroll;
	background-image:none;
	background-position:0 0;
	background-repeat:repeat;
	color: #000000;
	display:block;
	float:left;
	font-family:arial,Verdana,Helvetica,sans-serif;
	font-size:11px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	height:auto !important;
	line-height:0px;
	padding:0 0 0 30px;
	text-decoration:none;
	text-transform:uppercase;
}

	/* Root Menu Hover Persistence */
	#pun-navlinks.section ul.container a:hover, #pun-navlinks.section ul.container li:hover a, #pun-navlinks.section ul.container li.iehover a {
color: #FF0000;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
	}

	/* 2nd Menu */
	#pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a {
float: left;
bbackground: #FAD85B;
color: #000;
	}

	/* 2nd Menu Hover Persistence */
	#pun-navlinks.section ul.container li:hover li a:hover, #pun-navlinks.section ul.container li:hover li:hover a, #pun-navlinks.section ul.container li.iehover li a:hover, #pun-navlinks.section ul.container li.iehover li.iehover a {
background: #555555;
color: #FF0000;
	}

	/* Do Not Move - Must Come Before display:block for Gecko */
	#pun-navlinks.section ul.container li:hover ul ul, #pun-navlinks.section ul.container li:hover ul ul ul, #pun-navlinks.section ul.container li.iehover ul ul, #pun-navlinks.section ul.container li.iehover ul ul ul {
	  display: none;
	}

	#pun-navlinks.section ul.container li:hover ul, #pun-navlinks.section ul.container ul li:hover ul, #pun-navlinks.section ul.container ul ul li:hover ul, #pun-navlinks.section ul.container li.iehover ul, #pun-navlinks.section ul.container ul li.iehover ul, #pun-navlinks.section ul.container ul ul li.iehover ul {
	  display: block;
	}
	#pun-break1, #pun-break2{display: none;}
	#pun-announcement,#pun-announcement *{z-index: 1;}
</style>

Вот сайт
http://majoras.topbb.ru/

Посмотрите, пожалуйста!
И по возможности помогите

Отредактировано majoras (Пт, 19 Ноя 2010 17:42:07)

0

49

majoras написал(а):

Установил Выпадающее главное меню. v3. В целом всё нормально, но, никак не удаётся добиться желаемого результата

нинаю, я ненаблюдаю его ни в Опере ни в мазиле ни в ие, в Ие6-7
так ваще никаго меню нет. В Опере не видно и самого форума из-за некорректного кода:

<object id="mainpagemajoras" type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="100">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=http%3A//www.filekeeper.org/download/shared/James_Last_-_The_lonely_sheepheard.mp3|http%3A//www.filekeeper.org/download/shared/Blonker_-_Sidewalk_cafe.MP3|http%3A//www.filekeeper.org/download/shared/Ocarina_-_Song_of_Ocarina.MP3&amp;autoplay=1&amp;loop=1&amp;shuffle=2&amp; />

Вот такие пироги

Отредактировано Deff (Пт, 19 Ноя 2010 17:48:33)

0

50

Извините, а можно спросить?
Я тут решила сделать таблицу. Можно сделать чтоб она была как одна единая? Ну вот пример: http://s015.radikal.ru/i331/1011/21/0b06e66de77e.jpg 
Чтоб, когда на одного котёнка нажимаешь появлялся один текст, на другого другой текст. Можно ли так сделать?
Заранее спасибо.

Отредактировано AngelWolf (Пт, 19 Ноя 2010 19:33:12)

0

51

AngelWolf
Здравствуйте
Наверное, Вам нужен скрипт выплывающих контейнеров. Поройтесь в скриптах МайББ

0

52

AngelWolf
Здравствуйте.

AngelWolf написал(а):

Извините, а можно спросить?Я тут решила сделать таблицу. Можно сделать чтоб она была как одна единая? Ну вот пример:   Чтоб, когда на одного котёнка нажимаешь появлялся один текст, на другого другой текст. Можно ли так сделать?Заранее спасибо.

Посмотрите здесь: Выпадающее меню для форума.

0

53

Стилл
да, да)) это я знаю и знаю, как сделать. Но там не получается сделать всё единой картинкой. А мне нужно именно чтобы:

Чтоб, когда на одного котёнка нажимаешь появлялся один текст, на другого другой текст

0

54

rps
нет. это не то. не получается так, как я хочу...

0

55

AngelWolf
Отписывайтесь в таблицах сделаем, но не сейчас... в начале недели следущей

0

56

AngelWolf
А разве 251 сообщение из той темы Вам не подходит?

0

57

Deff написал(а):

нинаю, я ненаблюдаю его ни в Опере ни в мазиле ни в ие, в Ие6-7
так ваще никаго меню нет. В Опере не видно и самого форума из-за некорректного кода:

На Mozilla делал. Всё отражается
Насчёт 2-х остальных - согласен
Помогите кто нибудь, пожалуйста

Deff написал(а):

из-за некорректного кода:

Какого кода?
Можно по-конкретнее?

Отредактировано majoras (Сб, 20 Ноя 2010 01:06:30)

0

58

majoras :blush:  не наю - мне лень разбирацо -> код меню на 4 кнопки, которым я пользовался

Код:
<style type="text/css">
#part1,#part2,#part3,#part4 {
z-index: 2;
position: absolute;
background: url(http://s40.radikal.ru/i089/1009/c5/a03ded758c11.png);
border: 1px dotted #002000;
font-size: 10px;
visibility: hidden}
</style>

<table width="100%" border="0">
  <tr>
    <td width="25%"><div align="center"><a href="" onMouseOver="part1ON()" onMouseOut="part1OFF()"><img src="http://s002.radikal.ru/i200/1009/8a/3d27517ce117.png" alt="Новости"></a> </div>
<div id="part1" style="height: auto; width:200px" onMouseOver="part1ON()" onMouseOut="part1OFF()">

    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p>

</div></td>
    <td width="25%"><div align="center"><a href="" onMouseOver="part2ON()" onMouseOut="part2OFF()"><img src="http://s004.radikal.ru/i208/1009/80/7773b6f81eed.png" alt="Администрация"></a>
    </div>
<div id=part2 style="height: auto; width:200px"><div align="center"onMouseOver="part2ON()" onMouseOut="part2OFF()">

    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p>

</div></td>
    <td width="25%"><div align="center"><a href="" onMouseOver="part3ON()" onMouseOut="part3OFF()"><img src="http://s41.radikal.ru/i092/1009/fa/33f2106b1f63.png" alt="ссылки"></a>
    </div>
<div id="part3" style="height: auto; width:200px" onMouseOver="part3ON()" onMouseOut="part3OFF()">

    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p>

</div></td>
    <td width="25%"><div align="center"><a href="" onMouseOver="part4ON()" onMouseOut="part4OFF()"><img src="http://s61.radikal.ru/i173/1009/4b/29e730f8771e.png" alt="игра"></a></div>
<div id="part4" style="height: auto; width:200px" onMouseOver="part4ON()" onMouseOut="part4OFF()">

    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p><br>
    <p align="center"><a href="Адрес"><b><i>Ссылка</i></b></a></p>

</div></td>
  </tr>
</table>
<script language="JavaScript">
function part1ON() {document.getElementById("part1").style.visibility='visible'}
function part2ON(){document.getElementById("part2").style.visibility='visible'}
function part3ON(){document.getElementById("part3").style.visibility='visible'}
function part4ON(){document.getElementById("part4").style.visibility='visible'}
function part1OFF() {document.getElementById("part1").style.visibility='hidden'}
function part2OFF(){document.getElementById("part2").style.visibility='hidden'}
function part3OFF(){document.getElementById("part3").style.visibility='hidden'}
function part4OFF(){document.getElementById("part4").style.visibility='hidden'}
</script>

0

59

rps написал(а):

А разве 251 сообщение из той темы Вам не подходит?

Нет, что-то не то опять же.

0

60

majoras написал(а):

Посмотрите, пожалуйста!
И по возможности помогите

majoras
я подчистил ваш форум
добавил недостающее, убрал лишнее, теперь всё вроде бы так как вы хотели

+2


Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню