HTML简约导航栏代码

最新推荐文章于 2024-09-30 16:17:06 发布

CZ工作室官方

最新推荐文章于 2024-09-30 16:17:06 发布

阅读量737

点赞数

分类专栏：新手小白教程【CZ工作室】 CZ代码文章标签： html javascript java

本文链接：https://blog.csdn.net/chenzhi0122/article/details/131226560

版权

CZ代码同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

新手小白教程【CZ工作室】

13 篇文章 0 订阅

订阅专栏

这是一个HTML简约导航栏的代码实现，包括CSS样式和JavaScript交互，适用于多种现代浏览器，但不支持IE8及以下版本。代码中定义了导航栏的各个链接项，点击时有动画效果，并提供了版权信息。

摘要由CSDN通过智能技术生成

html简约导航栏代码，自行取用：

<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CZ工作室-导航栏</title>
<meta name="viewport"content=" height = device-height,width = device-width,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale = 1.0,user-scalable = no"/>
<link rel="stylesheet" href="https://demo.lanrenzhijia.com/demo/36/3642/demo/css/chinaz.css"/>
<script src="https://demo.lanrenzhijia.com/demo/36/3642/demo/js/jquery-1.8.3.min.js"></script>
<script src="https://demo.lanrenzhijia.com/demo/36/3642/demo/js/js.js"></script>
</head>
<body>
<div class="find_nav">
    <div class="find_nav_left">
        <div class="find_nav_list">
            <ul>
                <li class="find_nav_cur"><a href="javascript:void(0)">资讯</a></li>
                <li><a href="javascript:void(0)">分析</a></li>
                <li><a href="javascript:void(0)">原创</a></li>
                <li><a href="javascript:void(0)">评论</a></li>
                <li><a href="javascript:void(0)">技术</a></li>
                <li><a href="javascript:void(0)">项目</a></li>
                <li><a href="javascript:void(0)">黄页</a></li>
                <li><a href="javascript:void(0)">股市</a></li>
                <li><a href="javascript:void(0)">经济</a></li>
                <li class="sideline"></li>
            </ul>
        </div>
    </div>
    <a class="search_logo" href="">搜索</a>
</div>
<!--$(function() {-->
	<!--var fl_w = $(".find_nav_list").width();-->
	<!--var flb_w = $(".find_nav_left").width();-->
	<!--var fn_w = ($(".find_nav").width() - 62) / 2;-->
	<!--$(".find_nav_list li").on("click", function() {-->
		<!--var fnl_l;-->
		<!--var fnl_x = parseInt($(this).position().left);-->
		<!--if (fnl_x <= fn_w) {-->
			<!--fnl_l = 0;-->
		<!--} else if (fn_w - fnl_x <= flb_w - fl_w) {-->
			<!--fnl_l = flb_w - fl_w;-->
		<!--} else {-->
			<!--fnl_l = fn_w - fnl_x;-->
		<!--}-->
		<!--$(".find_nav_list").animate({-->
			<!--"left" : fnl_l-->
		<!--}, 300);-->
		<!--sessionStorage.left = fnl_l;-->
		<!--var c_nav = $(this).find("a").text();-->
		<!--navName(c_nav);-->
	<!--});-->
<!--});-->

<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，注意：不支持IE8及以下浏览器。</p>
<p>CZ工作室官方<a href="https://blog.csdn.net/chenzhi0122" target="_blank">&copy;2023</a></p>
</div>
</body>
</html>