u013082750
calvinhkf
采纳率100%
2015-02-06 08:36

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的问题,但是我找不到这个对应的函数在哪啊?
本人新手,问题描述有误的地方还请指正..

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • zhaojie_12 X_TIE 6年前

    <!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>




    这是个二级菜单的特效你修改下应该就能用了
    点赞 评论 复制链接分享

相关推荐