程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> 前端開發-Web前端 二級菜單移植

前端開發-Web前端 二級菜單移植

編輯:編程綜合問答
Web前端 二級菜單移植

web前端新手,好多都還不懂,還請多多指教.需要的效果如圖,在鼠標懸停在按鈕位置,出現二級菜單
圖片說明
以下是需要移植的代碼

 <ul class="verticals-nav red red">

        <li><a href="#"><i class="icon-briefcase"></i>產品
        <span class="submenu-icon"></span></a>
        <ul>
            <li><a href="#">二級導航</a>
            </li>
        </ul>
        </li>   
    </ul>

js腳本以及css文件

<link href="css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/google-maps.js"></script>
<script>$(document).ready(function(){$(".vertical-nav").verticalnav({speed: 400,align: "left"});
});
</script> 

需要移植的地方菜單不是vertical-nav 所以我需要對應的改一下,但是我把CSS文件裡面vertiacal-nav對應都改了,以及js腳本中$(".vertical-nav")選擇的元素也對應修改了,但是還是沒有對應的效果,我在想是不是 .verticalnav的問題,但是我找不到這個對應的函數在哪啊?
本人新手,問題描述有誤的地方還請指正..

最佳回答:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


通用的二級菜單
<br> #menu <br> { <br> width:300px; <br> margin:auto; <br> } <br> #div1 <br> { <br> display:none; <br> font-size:12px; <br> position:relative; <br> left:0px; <br> top:0px; <br> background-color:White; <br> padding:5px 10px 0px 10px; <br> width:320px; <br> } <br> #div2 <br> { <br> display:none; <br> font-size:12px; <br> position:relative; <br> left:50px; <br> top:0px; <br> background-color:White; <br> padding:5px 10px 0px 10px; <br> width:320px; <br> } <br> #div3 <br> { <br> display:none; <br> font-size:12px; <br> position:relative; <br> left:120px; <br> top:0px; <br> background-color:White; <br> padding:5px 10px 0px 10px; <br> width:320px; <br> } <br> #div4 <br> { <br> display:none; <br> font-size:12px; <br> position:relative; <br> left:200px; <br> top:0px; <br> background-color:White; <br> padding:5px 10px 0px 10px; <br> width:320px; <br> } <br>
<br> //顯示層 <br> function showDiv(divName) <br> { <br> document.getElementById(divName).style.display = &quot;block&quot;; <br> } <br> //隱藏層 <br> function hiddenDiv(divName) <br> { <br> document.getElementById(divName).style.display = &quot;none&quot;; <br> } <br>

菜單一 | 菜單二 | 菜單三 | 菜單四 子菜單一 子菜單一 子菜單二 子菜單一 子菜單二 子菜單三 子菜單一 子菜單二 子菜單三 子菜單四




這是個二級菜單的特效你修改下應該就能用了
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved