演示网站 很酷的网站顶部导航菜单样式
编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<div class="aui-header-top">
<div class="aui-header-title">
<div class="aui-title">
<a href="#">云服务</a>
</div>
<ul class="navList">
<li>
<a href="#">云计算基础服务</a>
</li>
<li>
<a href="#">云安全计算服务</a>
</li>
<li>
<a href="#">通信与视频</a>
</li>
<li>
<a href="#">云计算服务</a>
</li>
</ul>
</div>
</div>
<div class="aui-header-nav moveDown">
<div class="wrapper">
<a href="#">
<div class="aui-logo">
<h1>首页</h1>
</div>
</a>
<div class="aui-top-nav">
<ul class="menu">
<li class="product">
<a href="#">
产品
<span class="u-icon-caret"></span>
</a>
<div class="panel product">
<div class="inner">
<dl class="list">
<dt>客户服务云: </dt>
<dd>
<a href="#">
<i class="icon-font icon-font-item001"></i>
<em class="txt">在线客服</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item002"></i>
<em class="txt">机器人</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item003"></i>
<em class="txt">呼叫中心</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item004"></i>
<em class="txt">工单系统</em>
</a>
</dd>
</dl>
<dl class="list">
<dt>营销服务云: </dt>
<dd>
<a href="#">
<i class="icon-font icon-font-item005"></i>
<em class="txt">营销服务</em>
</a>
</dd>
</dl>
<dl class="list">
<dt>场景支持: </dt>
<dd>
<a href="#">
<i class="icon-font icon-font-item006"></i>
<em class="txt">移动办公</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item007"></i>
<em class="txt">微信客服</em>
</a>
</dd>
</dl>
</div>
</div>
</li>
<li class="finance">
<a href="#">
解决方案
<span class="u-icon-caret"></span>
</a>
<div class="panel finance">
<div class="inner">
<dl class="list">
<dd style="margin-left: -405px;">
<a href="#">
<i class="icon-font icon-font-item001"></i>
<em class="txt">互金解决方案</em>
</a>
</dd>
</dl>
</div>
</div>
</li>
<li>
<a href="#">案例
</a>
</li>
<li class="price">
<a href="#">
价格
<span class="u-icon-caret"></span>
</a>
</li>
<li class="service">
<a href="#">服务
</a>
</li>
<li class="merchants">
<a href="#">渠道合作
</a>
</li>
<li class="college">
<a href="#">轻学院
</a>
</li>
<li class="qa">
<a href="#">
帮助
<span class="u-icon-caret"></span>
</a>
<div class="panel qa">
<div class="inner">
<dl class="list">
<dd>
<a href="#">
<i class="icon-font icon-font-item002"></i>
<em class="txt">帮助中心</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item003"></i>
<em class="txt">下载</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item004"></i>
<em class="txt">更新日志</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item005"></i>
<em class="txt">开发指南</em>
</a>
</dd>
</dl>
</div>
</div>
</li>
<li class="community">
<a href="#">博客</a>
</li>
</ul>
</div>
<div class="m-login">
<a href="#" class="u-btn sign">登录</a>
<a href="#" class="u-btn free">免费试用</a>
</div>
</div>
</div>
<div class="aui-banner-slide">
<div class="aui-banner-main">
<div class="aui-banner-wrapper bd">
<ul>
<li>
<img src="images/banner001.png" alt="">
<div class="aui-banner-button">
<a href="#">立即试用</a>
</div>
</li>
<li>
<img src="images/banner002.png" alt="">
<div class="aui-banner-button">
<a href="#">立即试用</a>
<a href="#" class="aui-btn-wh">了解详情</a>
</div>
</li>
<li>
<img src="images/banner003.png" alt="">
<div class="aui-banner-button">
<a href="#">立即成为代理</a>
</div>
</li>
<li>
<img src="images/banner004.png" alt="">
<div class="aui-banner-button aui-banner-button-mo">
<a href="#">成为合伙人</a>
</div>
</li>
</ul>
</div>
<div class="hd aui-banner-circle">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="aui-banner-news">
<div class="aui-banner-news-box">
<ul>
<li>
<a href="#">
<div class="aui-bar-pic">
<img src="images/icon-bar001.png" alt="">
</div>
<div class="aui-bar-head">
<p class="aui-bar-title">网易七鱼发布全新品牌视频</p>
<p class="aui-bar-text">从服务抵达智慧营销未来</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="aui-bar-pic">
<img src="images/icon-bar002.png" alt="">
</div>
<div class="aui-bar-head">
<p class="aui-bar-title">营销服务云</p>
<p class="aui-bar-text">助力企业营销，促进客户转化</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="aui-bar-pic">
<img src="images/icon-bar003.png" alt="">
</div>
<div class="aui-bar-head">
<p class="aui-bar-title">智能客服机器人</p>
<p class="aui-bar-text">千亿级消息训练，97%应答准确率</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div style="height:1200px;"></div>
<script type="text/javascript">
jQuery(".aui-banner-main").slide({
mainCell: ".bd ul",
effect: "left",
autoPlay: true,
trigger: "click",
delayTime: 700
});
$(window).on('scroll', function() {
if ($(document).scrollTop() > 10) {
$('.aui-header-nav').addClass('solid').removeClass('moveDown');
$('.aui-header-top').addClass('moveUp');
} else {
$('.aui-header-nav').removeClass('solid').addClass('moveDown');
$('.aui-header-top').removeClass('moveUp');
}
});
</script>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
