calvinhkf 2015-02-06 08:36 采纳率: 100%
浏览 2330
已采纳

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条回答 默认 最新

  • X_TIE 2015-02-06 09:02
    关注

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




    这是个二级菜单的特效你修改下应该就能用了
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器