Помогите переделать onhover на onclick

sarik1986 · 18 Сен 2012

Здравствуйте.у меня скрипт меню с подкатегориями. никак не могу переделать его под себя.хочу чтоб меню был выпадающим вниз и открывался не onhover a onclick.как можно решить эту проблему?никак не могу разобратся(((Пожалуйста кому не лень помогите мне.

Это страница меню которая подключается на главной странице.

<?php
include "conndb.php";
?>
<span class="side_mnu_cat"><?php echo $label['A_C']; ?></span>
<ul id="verticalmenu" class="glossymenu">
<?php
$i=0;
$category_select=mysql_query("select * from category order by categoryid");
while($category_result=mysql_fetch_array($category_select))
{
$i++;
$cat_title=$category_result['category'];
$cat_name=substr($category_result['category'],0,5);
if($cat_title != '')
?>
<li><?php echo "<a href='maincategories-".$category_result[categoryid]."-".urlconvert($cat_name).".html' /> $cat_title </a>"; ?>
<ul style="margin-top:0px;">
<div class="subbox">
<table width="0" border="0" cellspacing="0" cellpadding="0">
<div class="fl">
<?php
$query="select * from subcategory where categoryid='$category_result[categoryid]' limit 0,20";
$query1=mysql_query($query);
while($sub_cat_result=mysql_fetch_array($query1))
{
$subcat_title=$sub_cat_result['subcategory'];
$sub_cat_name=substr($sub_cat_result['subcategory'],0,5);
?>
<div class="fl" style="width:200px;"><?php echo "<a href='Subcategories-".$sub_cat_result[subcategoryid]."-".$category_result[categoryid]."-".urlconvert($sub_cat_name).".html' >$subcat_title</a>"; ?></div>
</div>

<div class="fl subbox_lne" >
<?php
$query_sub="select * from sub_cat where subcat_id='$sub_cat_result[subcategoryid]' limit 0,20";
$query_sub1=mysql_query($query_sub);
$query_num_r=mysql_num_rows($query_sub1);
$i=1;
while($sub_subcat_result=mysql_fetch_array($query_sub1))
{
$subcat_sub_title=$sub_subcat_result['sub_subcat'];
$subcat_cat_name=substr($sub_subcat_result['sub_subcat'],0,5);
?>
<div class="submnuspan" style=" width:200px;">
<?php
if($i==$query_num_r){
echo "<a href='Subsubcategories-".$sub_subcat_result[subcategoryid]."-".$sub_cat_result[subcategoryid]."-".$category_result[categoryid]."-".urlconvert($subcat_cat_name).".html' style='color:#000;font-weight:normal;' >$subcat_sub_title</a>";
}else{
echo "<a href='Subsubcategories-".$sub_subcat_result[subcategoryid]."-".$sub_cat_result[subcategoryid]."-".$category_result[categoryid]."-".urlconvert($subcat_cat_name).".html' style='color:#000;font-weight:normal;' >$subcat_sub_title,</a>";
}
?>
</div>
<?php
$i++;
}
?>
</div>
<div class="clr"></div>
<?php } ?>
</table>
</div>
</ul>
</li>
<?php
}
?>
</ul>

Это js этого меню.

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="  "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

а это CSS

/*-----------------------------------------vertical menu------------------------------------*/
.side_mnu_hdr{background:url(../images/srch_middle.jpg) repeat-x; width:190px; height:32px; display:block; color:#fff; padding:0px 0 0 10px; font-weight:bold; border-top-left-radius:4px; border-top-right-radius:4px;}
.side_mnu_cat{background:url(../images/srch_middle.jpg) repeat-x; width:157px; height:35px; font-size:17px; display:block; color:#fff; padding:8px 0 0 45px; margin:-23px 0 0 0; font-weight:bold; border-radius:4px;}
.side_mnu_barn{background:url(../images/srch_middle.jpg) repeat-x; width:202px; height:32px; font-size:17px; display:block; color:#fff; padding:8px 0 0 0px; font-weight:bold; border-top-left-radius:4px; border-top-right-radius:4px;}
.glossymenu, .glossymenu li ul{list-style-type: none;margin:-8px 0 0 0;padding: 0;width: 200px;border: 1px solid #A2A0AB;font-size:12px;font-family:Arial, Helvetica, sans-serif;}
.glossymenu li{position: relative; border-bottom:solid 1px #BCCEE6;}
.glossymenu li a{color:#444444; font-weight:bold;background:#ECF6FF;display: block;width: auto;padding: 5px 0;padding-left: 5px;
text-decoration: none;}
.glossymenu li a:hover{color:#E4860D; text-decoration:underline; background:#D1E4F5;}
.glossymenu li ul{z-index:999;position: absolute;width: auto;left: 0;top: 0;display: none;}
.glossymenu li ul a{ background:transparent; font-size:12px; color:#000099;}
.subbox{width:450px; height:auto; background-color:#D1E4F5; font-family:Arial, Helvetica, sans-serif; padding:3px 5px 8px 3px; z-index:999; }
.subbox_lne{border-bottom:solid 1px #cccccc; width:100%;}
.submnuspan a{ float:left; display:block;}
.glossymenu .arrowdiv{position: absolute;right: 2px;}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Фанат · 18 Сен 2012

ну, это если кому уж совсем очень не лень...

ну, и вечный вопрос - при чём здесь РНР

Andkorol · 18 Сен 2012

Нечитабельно

sarik1986 · 18 Сен 2012

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

sarik1986 · 18 Сен 2012

так у меня проблема и есть с PHP.в паблике много красивых менюшек но я никак не могу подправить их чтоб работали с моим php кодом((

sarik1986 · 18 Сен 2012

Вот то что мне нужно.я хочу это меню у себя на сайте.но никак не могу подогнать свой php под него(((

В данном вертикальном меню, подменю открывается не при наведении курсора на главный пункт меню, как в предыдущем примере, а при клике на него.

1. CSS
#menu_body li ul {
display: none;
}
#menu_body li:hover ul, #menu_body li.over ul {
display: block;
}
#menu_body {
background:#171717;
width: 200px;
}
#menu_body a {
display: block;
width: 185px;
height: 24px;
padding-left: 15px;
}

#menu_body ul li {
list-style-type: none;
border-bottom: 1px solid #fff;
margin-left: -40px;
padding-left: 0px;
}

#menu_body ul li a {
color: #fff;
text-decoration: none;
font-size: 115%;
font-family: Georgia;
}

#menu_body ul li a:hover {
color: #fff;
text-decoration: none;
background:#424242;
}

#menu_body ul li ul li {
border: 0;
list-style-type: none;
color: #fff;
list-style-position: inside;
background:#7F7F7F;
}

#menu_body ul li ul{
border-top: 1px solid #fff;
margin-left: -10px;
padding-left: 50px;
}

2. JavaScript
Данный код вставляем перед закрывающим тегом </head>
<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
startList = function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu){
document.getElementById(id_menu).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}
window.onload=startList;
</script>

3. HTML

<div id="menu_body">
<ul>
<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>
<ul id="sub_menu_1">
<li><a href="#">Подпункт №1</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>
<ul id="sub_menu_2">
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>
<ul id="sub_menu_3">
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</a></li>
</ul>
</li>
</ul>
</div>

Мне нужно вывести данные из базы и как то построить 3.HTML часть(

Andkorol · 18 Сен 2012

Используй тег для оформления кода:

sarik1986 · 18 Сен 2012

использовал брат((никак не получается.чуть что не так пишу сразу вся страница не открывается( как мой PHP код подогнать под эт меню?(((пожалуйста ребята помогите(

Фанат · 18 Сен 2012

sarik1986 написал(а):
так у меня проблема и есть с PHP.в паблике много красивых менюшек но я никак не могу подправить их чтоб работали с моим php кодом((

с РНР у тебя никаких проблем нет. РНР к ним не имеет никакого отношения. РНР код тебе редактировать не нужно. Тебе надо отредактировать только HTML.

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

sarik1986 · 18 Сен 2012

спасибо.так кто нибудь может мне помочь собрать код под меню для вывода категорий и подкатегорий?

sarik1986 · 18 Сен 2012

я добавляю код из исходника все идеально работает а дальше уже не могу выводить категории и подкатегории из базы

Помогите переделать onhover на onclick

sarik1986

Новичок

Фанат

oncle terrible

Andkorol

Новичок

sarik1986

Новичок

sarik1986

Новичок

sarik1986

Новичок

Andkorol

Новичок

sarik1986

Новичок

Фанат

oncle terrible

sarik1986

Новичок

sarik1986

Новичок