html实现好看的多种风格导航菜单(附源码)

最新推荐文章于 2024-05-19 09:58:49 发布
最新推荐文章于 2024-05-19 09:58:49 发布
阅读量4.4w 收藏 237
点赞数 65
分类专栏： HTML5实战案例 资源源码 文章标签： html javascript 前端
BY xcSharp@126.com
本文链接：https://blog.csdn.net/weixin_43151418/article/details/131412565
版权

文章目录

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/131412565

html实现好看的多种风格导航菜单(附源码) ，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。

1.设计来源

1.1 顶部导航菜单

1.1.1 界面风格1-一二级连体导航菜单

    舒适版的顶部导航菜单，代码简单，方便直接使用，具体效果，见下面的 动态效果 。

在这里插入图片描述

1.1.2 界面风格2-二级导航下拉框

    舒适版的顶部导航菜单，代码简单，方便直接使用，具体效果，见下面的 动态效果 。

在这里插入图片描述

1.1.3 界面风格3-系统开始风格

    舒适版的顶部导航菜单，代码简单，方便直接使用，具体效果，见下面的 动态效果 。

在这里插入图片描述

1.1.4 界面风格4-购物类导航菜单

    舒适版的顶部导航菜单，代码简单，方便直接使用，具体效果，见下面的 动态效果 。

在这里插入图片描述

1.1.5 界面风格5 - 带搜索扩展的导航条

    舒适版的顶部导航菜单，代码简单，方便直接使用，具体效果，见下面的 动态效果 。

在这里插入图片描述

1.1.6 界面风格6-火热效果多级导航条

    舒适版的顶部导航菜单，支持多级菜单导航，代码简单，方便直接使用，具体效果，见下面的 动态效果 。

在这里插入图片描述

1.2 悬浮按钮菜单

    悬浮按钮菜单，支持放到界面任何位置，支持自定义多级菜单，支持动态配置各种样式，各种效果。

1.2.1 界面风格1

    酷炫的悬浮按钮菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

在这里插入图片描述
圈起来效果

在这里插入图片描述
半圆效果

在这里插入图片描述
半角效果

1.2.2 界面风格2

    酷炫的悬浮按钮菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

在这里插入图片描述
半圆效果

在这里插入图片描述
圈起来效果

1.2.3 界面风格3

    酷炫的悬浮按钮菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，这里部分是图片，看不出动态效果，具体界面完整效果，见下面的 动态效果 。

右下角固定图标
在这里插入图片描述

1.2.4 界面风格4

    酷炫的悬浮按钮菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

在这里插入图片描述

1.2.5 界面风格5

    酷炫的悬浮按钮菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

在这里插入图片描述
效果1-花型导航

在这里插入图片描述
效果2-环形导航吸附

在这里插入图片描述
效果3-环形导航间隔

在这里插入图片描述
效果4-横条导航

1.2.6 界面风格6

    酷炫的悬浮按钮菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

单击出现导航菜单

在这里插入图片描述

1.2.7 界面风格7

    酷炫的悬浮按钮菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

单击出现导航菜单
在这里插入图片描述

1.2.8 界面风格8

    酷炫的悬浮按钮菜单，支持多级菜单导航，支持任意位置拖动，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.3 右键功能菜单

1.3.1 界面风格1 - 多级右键导航菜单

    灵活的右键功能菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.3.2 界面风格2 - 单级右键导航菜单

    灵活的右键功能菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.3.3 界面风格3 - 酷炫圆形右键导航菜单

    灵活的右键功能菜单，支持多级菜单导航，右键点击的时候带有音效，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.4 左侧导航菜单

1.4.1 界面风格1 - 简易风左侧导航菜单

    固定的左侧导航菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.4.2 界面风格2 - 黑系列左侧导航菜单

    固定的左侧导航菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.4.3 界面风格3

    固定的左侧导航菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.4.4 界面风格4

    固定的左侧导航菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.4.5 界面风格5

    固定的左侧导航菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

1.4.6 界面风格6

    固定的左侧导航菜单，支持多级菜单导航，代码简单，方便直接使用，多种效果样式，具体效果，见下面的 动态效果 。

请添加图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，代码兼容性强，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的导航菜单模板。

html实现好看的多种风格导航菜单

2.2 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>多种风格导航菜单 - xcLeigh</title>
	<link href="images/favicon.png" rel="icon">
	<link rel="stylesheet" type="text/css" href="css/mycss.css" />
</head>

<body style="margin:auto;padding:auto; background-color:rgba(255,133,0,0.03);">
	<div class="dicContent" style="width:100%; height:calc(100% - 76px); z-index:111; position:absolute; margin:0px;padding:0px; margin-top:46px;">
        
		<iframe  class="dicContent" id="iframeContent" src="template/右键功能菜单风格1/index.html" border="0" style="border:0px;width:100%;height:calc(100%); position: absolute; margin:0px;padding:0px;background-color: transparent !important;"></iframe>
	</div>
    <div style="position: absolute; bottom: 0px; text-align: center; width:100%; z-index: 999999;">
        <span style="background-color: orange; padding: 4px 8px; display: block; color: white;">此处是演示，每个风格的代码独立，可以直接使用，这个页面是将所有代码关联起来，便于演示。有不懂的可以私信联系我。</span>
    </div>
    <div class="nav">
		<span onclick="showUrl('https://blog.csdn.net/weixin_43151418/')">
            <img src="images/favicon.png" style="width: 12px; height: 12px; padding-top: 12px;">
            xcLeigh源码
        </span>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格8/index.html',this)" style="border-right: 2px dashed orange;">风格8</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格7/index.html',this)">风格7</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格6/index.html',this)">风格6</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格5/index.html',this)">风格5</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格4/index.html',this)">风格4</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格3/index.html',this)">风格3</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格2/index.html',this)">风格2</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/悬浮按钮菜单风格1/index.html',this)">悬浮按钮菜单</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/顶部导航菜单风格6/index.html',this)" style="border-right: 2px dashed orange;">风格6</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/顶部导航菜单风格5/index.html',this)">风格5</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/顶部导航菜单风格4/index.html',this)">风格4</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/顶部导航菜单风格3/index.html',this)">风格3</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/顶部导航菜单风格2/index.html',this)">风格2</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/顶部导航菜单风格1/index.html',this)">顶部导航菜单</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/左侧导航菜单风格6/index.html',this)" style="border-right: 2px dashed orange;">风格6</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/左侧导航菜单风格5/index.html',this)">风格5</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/左侧导航菜单风格4/index.html',this)">风格4</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/左侧导航菜单风格3/index.html',this)">风格3</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/左侧导航菜单风格2/index.html',this)">风格2</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/左侧导航菜单风格1/index.html',this)">左侧导航菜单</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/右键功能菜单风格3/index.html',this)" style="border-right: 2px dashed orange;">风格3</a>
        <a href="javascript:void(0);" class="link" onclick="showContent('template/右键功能菜单风格2/index.html',this)">风格2</a>
        <a href="javascript:void(0);" class="link active" onclick="showContent('template/右键功能菜单风格1/index.html',this)" style="border-left: 2px dashed orange;">右键功能菜单</a>
    </div>
</body>
<script type="text/javascript"  src="js/myscript.js"></script>
</html>

2.3 资源结构图

所有资源结构示例

在这里插入图片描述

单个资源结构示例

在这里插入图片描述

源码下载

html实现好看的多种风格导航菜单（源码） 点击下载
在这里插入图片描述

     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/131412565（防止抄袭，原文地址不可删除）

xcLeigh
关注
  • 65
    点赞
  • 踩
  • 237
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 36
    评论
专栏目录
弹性盒练习
w18789476022的博客
11-19 284
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../c
个人好看的自适应导航页HTML源码
01-09
源码介绍： 个人导航HTML源码，支持三端自适应，带赞助功能，采用设计配色网站点赞量最高的一个配色方案，一个二次元风格的引导页就此诞生，经过长传美国服务器测试，结果也是很理想，测速达到了全国深绿，手机端，平板端，PC端经过测试自适应效果也是很理想，手机端由于屏幕宽度的局限性，可展示的内容不够丰富，PC端则能完美体现网页的美感，希望本源码能广受大家的喜欢 免费0积分获取，喜欢的朋友可以直接下载，通过记事本可以修改里面的内容，然后双击index.html就可以查询效果，也可以部署到服务器上去
Html5 + Css3 制作酷炫的导航栏
09-26
看我博客 http://blog.csdn.net/taoerit/article/details/48638659
html实现导航栏
最新发布
studyinstall的博客
05-19 713
【代码】【无标题】
html实现好看的多种风格导航菜单(源码)
06-29
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。 效果演示介绍地址： https://blog.csdn.net/weixin_43151418/article/details/131412565
非常漂亮的导航菜单(html)
07-03
非常漂亮的导航菜单(html)，鼠标放上去又滑动效果
html实现好看的导航主页(附源码)
xcLeigh
11-25 1万+
html实现好看的导航主页(附源码) html实现好看的导航主页，html导航博客，html导航界面，通过头部主菜单，中部搜索导航，尾部悬浮出现底部菜单，右侧音乐播放按钮，背景酷炫的动态效果，实现好看的导航主页。用作自己的常用辅助导航界面，还有屏幕保护界面，全屏(F12)查阅效果更加。
HTML网页入门练习——导航栏布局设计
热门推荐
m0_53156691的博客
01-28 2万+
导航栏布局 首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。 具体步骤如下：
html标签
AprilIsYourLie的博客
05-17 1299
标签用于标识页面中的导航部分，通常包含网站的主要导航菜单或链接列表。标签通常用于表格的首行或首列，用于标识表格的标题或表头。标签的内容通常是表格的标题或列名，可以通过 CSS 样式来进行样式化，以突出显示表头信息。是 HTML 中用于定义文档中的一个区块（division/区域）的标签。标签用于在 HTML 表格中定义一个单元格，即表格中的一个数据单元。是 HTML 中用于定义表格头部单元格的标签。是 HTML 中用于定义表格单元格的标签。无序列表中的每个列表项都由。是 HTML 中用于定义表格行的标签。
精品单页个人导航HTML源码
CSDN专家-微编程的博客
03-25 1184
简约大气精品单页导航-可自行修改其他页面，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面。
HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
weixin_34060561的博客
06-09 5204
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
作品展示&图片展示HTML源码-左侧导航个人图库网页模板.zip
03-30
大学生们、职场新人们，想要在求职竞争中展现自己的专业技能和创意才华吗？这份专为作品展示和图片展示设计的HTML源码，将成为你打造个性化在线作品集的得力工具！ 在这个视觉为王的时代，一个高质量的在线作品集无疑是你简历中的一大亮点。这份源码提供了多种精美的布局和动画效果，让你的作品以最吸引人的方式呈现给潜在雇主或客户。无论是设计师的创意作品、摄影师的精彩照片，还是技术人员的项目演示，这些模板都能帮助你高效地构建出一个专业的作品展示平台。 这份源码采用了响应式设计，确保你的在线作品集在不同设备上都能完美显示，同时支持触屏操作，让浏览体验更加流畅。它还提供了易于自定义的功能，即使你不具备深厚的编程知识，也能通过简单的修改，快速生成一个具有个人风格的网站。 对于正处在求职路上的大学生和初入职场的上班族来说，这份源码不仅能够提升你的网络形象，更是一份实实在在的技能证明。它展现了你在实际项目中运用技术解决问题的能力，以及你对细节的关注和对美的追求。 立即采用这份作品展示&图片展示HTML源码，让你的简历在众多竞争者中脱颖而出，为你赢得更多面试机会和职业发展的机遇！
html菜单栏
03-26
html菜单栏可以指定那个页面被选中
html导航菜单栏
06-08
风格朴素漂亮的html模板 黑色的水平导航菜单 菜单项弹出显示
固定导航浮动在顶部效果html代码
11-09
单一一个固定导航浮动在顶部效果html源代码，导航固定在顶部，浮动在最上层，不随页面的下拉而改变，很不错的界面值得借鉴
html导航样式模板
11-29
多种导航样式模板集合；其中有生成模板的方式，使用方式。项目主要是为了练手 项目适用于移动端 PC端。有兴趣的可以下载看看
网址网站导航整站源码
03-19
* 提供多种风格的皮肤、天气预报、日历等个性化功能 * 集成115聚合搜索、百度、Google等引擎入口，全方位搜索体验 * 提供站内网址搜索、网站浏览记录等功能 * 系统安全设置：安全验证、系统负载控制、CC防护设置...
JAVA上百实例源码以及开源项目
01-03
Java右键弹出菜单源码 简单 Java圆形按钮实例代码，含注释 两个目标文件，自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 　用JAVA编写的指针式圆形电子钟，效果图如下所示...
JAVA上百实例源码以及开源项目源代码
09-17
Java右键弹出菜单源码 简单 Java圆形按钮实例代码，含注释 两个目标文件，自绘button。 Java圆形电子时钟源代码 1个目标文件 内容索引:JAVA源码,系统相关,电子钟 　用JAVA编写的指针式圆形电子钟，效果图如下所示...
html实现好看的多种风格导航菜单(源码
11-04
HTML是一种标记语言，用于创建网页的结构，不能实现多种风格的导航菜单。实现好看的多种风格导航菜单需要使用HTML结合CSS来进行样式设计。 以下是一个示例的HTML代码，用于创建一个多种风格的导航菜单： ``` <!DOCTYPE html> <html> <head> <style> /* 设置基本的导航菜单样式 */ .nav-menu { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; } /* 设置默认的导航菜单项样式 */ .nav-menu li { display: inline-block; padding: 10px; background-color: #ccc; border-radius: 5px; } /* 设置不同风格的导航菜单项样式 */ .nav-menu .style1 { background-color: #ff0000; color: #fff; } .nav-menu .style2 { background-color: #00ff00; color: #fff; } .nav-menu .style3 { background-color: #0000ff; color: #fff; } </style> </head> <body> <ul class="nav-menu"> <li class="style1">菜单1</li> <li class="style2">菜单2</li> <li class="style3">菜单3</li> </ul> </body> </html> ``` 在上述示例中，我们设置了一个`.nav-menu`的类来表示导航菜单，并设置了基本的样式。然后，我们为每个导航菜单项设置不同的类名（例如`.style1`、`.style2`、`.style3`），并在CSS中分别为它们设置了不同的样式，以实现多种风格的导航菜单。 通过修改样式，你可以根据自己的需要来自定义导航菜单的颜色、字体、边框等等，以实现更多种风格的导航菜单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 36
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xcLeigh

万水千山总是情，打赏两块行不行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值