Question

希望是一个简单的改变..我目前有一个下拉式导航菜单;我想改为两层导航样式设置。与http://liptrot.org/journal/entries/two-tier-navigation-with-some-jquery/

类似

当前的HTML和jQuery：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">

<script src="javascript/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>

<link type="text/css" href="css/main.css" rel="stylesheet">    

<!-- New JavaScript functions to enable dropdown navigation -->
<script type="text/javascript"> 
    $(document).ready(function(){        
        $('nav li ul').hide().removeClass('fallback');
        $('nav li').hover(
            function () {
                $('ul', this).stop().slideDown(300);
            },
            function () {
                $('ul', this).stop().slideUp(300);
            }
        );       
    });
</script>

<!-- New JavaScript functions to enable refresh of page content DIV -->
<script type="text/javascript"> 
    function getPageContent(a) {
            $.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
            $('#welcome').hide();
    }

    function processContent(file_data)
    {
        $("#PageContent").html(file_data);
    }
</script>


<style>
nav ul {
    text-align:left;    
}
nav ul li {
    float:left; 
    display:inline;
    border-right: 1px solid #083D72;
}
nav ul li:hover {
    background:#2D8FF0; 
}
nav ul li a {
    display:block; 
    color:#444; 
}
nav ul li ul {
    position:absolute; 
    width:180px;
    background:#09427C;
    font-size: 12px;    
}
nav ul li ul li {
    width:180px;    
}
nav ul li ul li a {
    display:block; 
    color:#444;
}
nav ul li ul li:hover a {}
nav ul li ul.fallback {
    display:none;
}
nav ul li:hover ul.fallback {
    display:block;
}

</style>

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="">
<hgroup>
    <h1 class="logo"><img src="images/logo.png" width="163" height="59" alt="Tables and Chairs"></h1>
    <h2 class="heading">Welcome to Tables and Chairs</h2>
</hgroup>
</tr>
</table>

<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="data-sources"><a href="#" title="">Date <span class="icon-caret-down"></span> </a>       
    <li>
        <a onClick="getPageContent('Information.html')">Information</a>
        <ul class="fallback">
        <li><a onClick="getPageContent('ovens.html')">Ovens</a></li>
            <li><a onClick="getPageContent('fridges.html')">Fridges</a></li>
            <li><a onClick="getPageContent('tables.html')">Tables</a></li>
            <li><a onClick="getPageContent('costing.html')">Costing</a></li>
            <li><a onClick="getPageContent('install.html')">Installation</a></li>
        </ul>
    </li>
    <li>
        <a onClick="getPageContent('legal.html')">Legal Info</a>
        <ul class="fallback">
            <li><a onClick="getPageContent('terms.html')">Terms & Conditions</a></li>
            <li><a onClick="getPageContent('data.html')">Data Protection</a></li>                  
        </ul>
    </li>
    <li>
        <a onClick="getPageContent('contact.html')">Contact Us</a>
        <ul class="fallback">
        <li><a href="javascript:openHelpWind('contact')">Contact Details</a></li>
            <li><a onClick="getPageContent('comments.html')">Your Comments</a></li>
            <li><a onClick="getPageContent('addinfos.html')">Additional Info</a></li>
        </ul>
    </li>
    <li>
        <a onClick="getPageContent('cookies.html')">Cookies</a>
    </li>
</li>
</ul>
</nav>
<!-- MENU END -->

<!-- SECOND TIER START-->
<div class="sub-menu">

<div>
<!-- SECOND TIER -->



<div id="PageContent">

</div>

<footer class="site-footer" role="contentinfo">
<div class="wrap">
    <small class="fr">&copy; 2013 T&C All rights reserved</small>
</div>
</footer> <!-- END footer.site-footer -->

</body>
</html>

由于

将下拉菜单转换为双层导航

0 个答案: