для работы меню требуется наличие jQuery
Здраствуйте! а объясните как это установить, раз требуется наличие?
Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню
для работы меню требуется наличие jQuery
Здраствуйте! а объясните как это установить, раз требуется наличие?
и не подскажите как меню перемещать....чтоб оно у меня повыше было....на шапку залезало
вот форум http://truecstest.mybb.ru/
извините за мою тупость...уже все нашел...удалите мои сообщения
Ещё раз напоминаю, для ВСЕХ!
Этот скрипт более устанавливать не требуется:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Теперь он есть на каждом форуме! Если он стоит у Вас в ХТМЛ-верх или ХТМЛ-низ, удалите его.
Этот скрипт более устанавливать не требуется:
А что он дает? Я ничего нового не заметила.
здраствуйте! Помогите мне....я нашел скрипт меню, и хочу его сделать горизонтальным и переместить на шапку, подскажите какими кодами это поправить? (http://truecstest.mybb.ru/)
Отредактировано loOw (Вс, 19 Сен 2010 17:17:29)
ладно=) попрошу немного иначе=) помоги пожалуйста подкорректировать этот код чтоб он стал горизонтальным и заменить им главное меню форума
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&q=kiwi&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&q=oranges&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&q=grapes&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&q=strawberries&m=text">Photo Stream</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>Установил Выпадающее главное меню. v3. В целом всё нормально, но, никак не удаётся добиться желаемого результата
1. Пункты меню(Форум, участники, поиск, профиль и т.д.) у меня на разных уровнях. Также хотелось бы, чтоб пункты отражались не CapLooks, а просто начинались с большой буквы
2. Хотелось бы, чтоб верхний срез выпадающего меню находился на уровне нижнего среза самого меню. По возможности туда же и треуголники перенести
3. Не удалось внедрить 2-й вариант(Звуковой) Системы оповещения о новом личном сообщении
4. Всплывающее меню у меня залазит под плеер
Вот скрин
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)
Установил Выпадающее главное меню. 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&autoplay=1&loop=1&shuffle=2& />
Вот такие пироги
Отредактировано Deff (Пт, 19 Ноя 2010 17:48:33)
Извините, а можно спросить?
Я тут решила сделать таблицу. Можно сделать чтоб она была как одна единая? Ну вот пример:
Чтоб, когда на одного котёнка нажимаешь появлялся один текст, на другого другой текст. Можно ли так сделать?
Заранее спасибо.
Отредактировано AngelWolf (Пт, 19 Ноя 2010 19:33:12)
AngelWolf
Здравствуйте
Наверное, Вам нужен скрипт выплывающих контейнеров. Поройтесь в скриптах МайББ
AngelWolf
Здравствуйте.
Извините, а можно спросить?Я тут решила сделать таблицу. Можно сделать чтоб она была как одна единая? Ну вот пример: Чтоб, когда на одного котёнка нажимаешь появлялся один текст, на другого другой текст. Можно ли так сделать?Заранее спасибо.
Посмотрите здесь: Выпадающее меню для форума.
Стилл
да, да)) это я знаю и знаю, как сделать. Но там не получается сделать всё единой картинкой. А мне нужно именно чтобы:
Чтоб, когда на одного котёнка нажимаешь появлялся один текст, на другого другой текст
rps
нет. это не то. не получается так, как я хочу...
AngelWolf
Отписывайтесь в таблицах сделаем, но не сейчас... в начале недели следущей
AngelWolf
А разве 251 сообщение из той темы Вам не подходит?
нинаю, я ненаблюдаю его ни в Опере ни в мазиле ни в ие, в Ие6-7
так ваще никаго меню нет. В Опере не видно и самого форума из-за некорректного кода:
На Mozilla делал. Всё отражается
Насчёт 2-х остальных - согласен
Помогите кто нибудь, пожалуйста
из-за некорректного кода:
Какого кода?
Можно по-конкретнее?
Отредактировано majoras (Сб, 20 Ноя 2010 01:06:30)
majoras
не наю - мне лень разбирацо -> код меню на 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>А разве 251 сообщение из той темы Вам не подходит?
Нет, что-то не то опять же.
Посмотрите, пожалуйста!
И по возможности помогите
majoras
я подчистил ваш форум
добавил недостающее, убрал лишнее, теперь всё вроде бы так как вы хотели
| Выпадающее меню для форума | Архив | Пн, 26 Авг 2013 |
| Всплывающее меню на объявление | Корзина | Чт, 8 Апр 2010 |
| Выпадающее меню | Корзина | Пт, 10 Сен 2010 |
| Помощь по созданию бокового меню! | Корзина | Пт, 8 Июл 2011 |
| Общие вопросы от новичков - 16 | Корзина | Сб, 12 Дек 2009 |
Вы здесь » Единый форум поддержки » Архив » Создаем выплывающее меню