作者 主題: 最簡單修改導航為下拉選單的方法(lativ)  (閱讀 2950 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
最簡單修改導航為下拉選單的方法(lativ)
« 於: 十月 08, 2012, 11:49:54 上午 »
基本上適用所有模板
如果版面易位請自行調整CSS
打開page_header.lbiˇ找 到
代碼: [選擇]
<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
<td>
<a href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if}>{$nav.name}[/url]
</td>
<!-- {/foreach} -->
換成
代碼: [選擇]
<td>
<?php
function get_subcate_byurl($url)
{
$rs strpos($url,"category");
if(
$rs!==false)
{
preg_match("/\d+/i",$url,$matches);
$cid $matches[0];
$cat_arr = array();
$sql "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$cid." and is_show=1";
$res $GLOBALS['db']->getAll($sql);

foreach(
$res as $idx => $row)
{
$cat_arr[$idx]['id'] = $row['cat_id'];
$cat_arr[$idx]['name'] = $row['cat_name'];
$cat_arr[$idx]['url'] = build_uri('category', array('cid' => $row['cat_id']), $row['cat_name']);
$cat_arr[$idx]['children'] = get_clild_list($row['cat_id']);
}
return 
$cat_arr;
}
else 
{
return 
false;
}
}
function 
get_clild_list($pid)
{
$sql_sub "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$pid." and is_show=1";
$subres $GLOBALS['db']->getAll($sql_sub);
if(
$subres)
{
foreach (
$subres as $sidx => $subrow)
{
$children[$sidx]['id']=$subrow['cat_id'];
$children[$sidx]['name']=$subrow['cat_name'];
$children[$sidx]['url']=build_uri('category', array('cid' => $subrow['cat_id']), $subrow['cat_name']);
}
}
else 
{
$children null;
}
return 
$children;
}
?>

<div id="header-menu" class="block">
<p {if $navigator_list.config.index eq 1} class="curs" {/if}><a href="../index.php">{$lang.home}[/url]</p>
<ul>
<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
<li onMouseOver="sw_nav(this,1);" onMouseOut="sw_nav(this,0);" {if $nav.active eq 1} class="curs"{/if}><a href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if}>{$nav.name}[/url]
<?php 
$subcates 
get_subcate_byurl($GLOBALS['smarty']->_var['nav']['url']);
if(
$subcates!=false){
if(
count($subcates)>0){
echo 
"<div class='sub_nav'>";
if(
$subcates){
foreach(
$subcates as $cate){
echo 
"<a href='".$cate['url']."' class='level_1'>".$cate['name']."[/url]";

}

echo 
"</div><div class='nomask'></div>";
}
}
?>

</li>
<!-- {/foreach} -->
</ul>
</div>
<script type="text/javascript">
function sw_nav(obj,tag){
var subdivs = obj.getElementsByTa gName("DIV");
if(subdivs.length>0){
if(tag==1){
subdivs[0].style.display = "block";
} else {
subdivs[0].style.display = "none";
}
}
}
</script>
<style type="text/css">
#header-menu{
padding:0 25px;
}
#header-menu p, #header-menu ul li{
float:left;
}
#header-menu ul li a,#header-menu p a{
display:block;
text-decoration:none;
line-height:25px;
padding:0 10px;
color:#765935;
}
#header-menu ul li a:hover,#header-menu p a:hover{
color:#333;
}
#header-menu .curs a {
color:#c00;
}
.sub_nav{
background:#D3C08D;
min-width:100px;
height:auto;
line-height:30px;
position:absolute;
z-index:5003;
display:none;
}
.nomask{
position:absolute;
z-index:5002;
display:none;
margin-left:-12px;
height:25px;
}
.sub_nav a.level_1{
/*float:left;*//*水平子選單用*/
display:block;
padding:6px 6px 6px 13px;
font:11px Tahoma,Verdana,PMingLiU,Arial;
border-bottom:1px dotted #D1D1D1;
*border-bottom:1px dotted #D1D1D1 !important;
*border-bottom:1px solid #A8A8A8;
text-decoration:none;
background:url(images/middle_atv.gif);
}
#header-menu ul li.curs .sub_nav a{
color:#765935;
}
#header-menu ul li.curs .sub_nav a:hover, .sub_nav a.level_1:hover{
color:#333;
text-decoration:none;
}
</style>
</td>
另一種方式(平均分配寬度,如圖:)
代碼: [選擇]
<?php
/**
* 通過傳入參數的url判斷是否為目錄分類,從而獲取子菜單
*
* @param string $url
*/
function get_subcate_byurl($url)
{
$rs strpos($url,"category");
if(
$rs!==false)
{
preg_match("/\d+/i",$url,$matches);
$cid $matches[0];
$cat_arr = array();
$sql "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$cid." and is_show=1";
$res $GLOBALS['db']->getAll($sql);

foreach(
$res as $idx => $row)
{
$cat_arr[$idx]['id'] = $row['cat_id'];
$cat_arr[$idx]['name'] = $row['cat_name'];
$cat_arr[$idx]['url'] = build_uri('category', array('cid' => $row['cat_id']), $row['cat_name']);
$cat_arr[$idx]['children'] = get_clild_list($row['cat_id']);
}
return 
$cat_arr;
}
else 
{
return 
false;
}
}
function 
get_clild_list($pid)
{
//開始獲取子分類
$sql_sub "select * from ".$GLOBALS['ecs']->table('category')." where parent_id=".$pid." and is_show=1";
$subres $GLOBALS['db']->getAll($sql_sub);
if(
$subres)
{
foreach (
$subres as $sidx => $subrow)
{
$children[$sidx]['id']=$subrow['cat_id'];
$children[$sidx]['name']=$subrow['cat_name'];
$children[$sidx]['url']=build_uri('category', array('cid' => $subrow['cat_id']), $subrow['cat_name']);
}
}
else 
{
$children null;
}
return 
$children;
}
?>

<div id="header-menu" class="block">
<td>
<p {if $navigator_list.config.index eq 1} class="curs" {/if}><a href="../index.php">{$lang.home}</a></p>
</td>
<ul>
<!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
<td>
<li onMouseOver="sw_nav(this,1);" onMouseOut="sw_nav(this,0);" {if $nav.active eq 1} class="curs"{/if}><a href="{$nav.url}" {if $nav.opennew eq 1}target="_blank" {/if}>{$nav.name}</a>
<?php 
$subcates 
get_subcate_byurl($GLOBALS['smarty']->_var['nav']['url']);
if(
$subcates!=false){
if(
count($subcates)>0){
echo 
"<div class='sub_nav'>";
if(
$subcates){
foreach(
$subcates as $cate){
echo 
"<a href='".$cate['url']."' class='level_1'>".$cate['name']."</a>";

}

echo 
"</div><div class='nomask'></div>";
}
}
?>

</li></td>
<!-- {/foreach} -->
</ul>
</div>
<script type="text/javascript">
function sw_nav(obj,tag){
var subdivs = obj.getElementsByTagName("DIV");
if(subdivs.length>0){
if(tag==1){
subdivs[0].style.display = "block";
} else {
subdivs[0].style.display = "none";
}
}
}
</script>
<style type="text/css">
#header-menu{
padding:0 25px;
}
#header-menu p, #header-menu ul li{
float:left;
}
#header-menu ul li a,#header-menu p a{
display:block;
text-decoration:none;
line-height:25px;
padding:0 10px;
color:#765935;
}
#header-menu ul li a:hover,#header-menu p a:hover{
color:#333;
}
#header-menu .curs a {
color:#c00;
}
.sub_nav{
background:#D3C08D;
min-width:100px;
height:auto;
line-height:30px;
position:absolute;
z-index:5003;
display:none;
}
.nomask{
position:absolute;
z-index:5002;
display:none;
margin-left:-12px;
height:25px;
}
.sub_nav a.level_1{
/*float:left;*/
display:block;
padding:6px 6px 6px 13px;
font:11px Tahoma,Verdana,PMingLiU,Arial;
border-bottom:1px dotted #D1D1D1;
*border-bottom:1px dotted #D1D1D1 !important;
*border-bottom:1px solid #A8A8A8;
text-decoration:none;
background:url(images/middle_atv.gif);
}
#header-menu ul li.curs .sub_nav a{
color:#765935;
}
#header-menu ul li.curs .sub_nav a:hover, .sub_nav a.level_1:hover{
color:#333;
text-decoration:none;
}
</style>
存檔OK!
« 上次編輯: 十月 18, 2012, 10:04:56 上午 由 andy »
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php

離線 qaw3388

  • VIP會員
  • 正式會員
  • ******
  • 積分 +0/-0
Re: 最簡單修改導航為下拉選單的方法(lativ)
« 回覆 #1 於: 十月 18, 2012, 11:21:44 上午 »
你好,

我分別用 google 瀏覽器 跟IE 瀏覽器

google 瀏覽器前面會有一個點 一個點的..(IE瀏覽器不會)

請問要怎麼去除那一個點

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
Re: 最簡單修改導航為下拉選單的方法(lativ)
« 回覆 #2 於: 十月 18, 2012, 01:43:43 下午 »
CSS加上
代碼: [選擇]
ul, li {
list-style: none;
}
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php