首页 > 其他分享> > 05HUI - 头部导航及菜单（hui-header）

05HUI - 头部导航及菜单（hui-header）

2021-07-07 18:05:07 作者：互联网

HUI 通过 .hui-header 样式完成头部布局：

<header class="hui-header">
    <div id="hui-back"></div>
    <h1>这里是标题</h1>
    <div id="hui-header-menu"></div>
</header>

效果图

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI </title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI </h1>
    <div id="hui-header-menu"></div>
</header>
<div class="hui-wrap">
    <div class="hui-center-title" style="margin-top:15px;"><h1>演示样例</h1></div>
    <div style="padding:28px; text-align:center;" class="hui-text">
        点击右上角的菜单按钮来体验效果吧！
    </div>
</div>
<script type="text/javascript" src="../js/hui.js"></script>
<script type="text/javascript">
var meuns = ['我的订单', '我的消息', '我的收藏', '退出登录'];
var cancel = '关闭菜单';
hui('#hui-header-menu').click(function(){
    hui.actionSheet(meuns, cancel, function(e){
        console.log(e.index);
        hui.toast(e.innerHTML);
    });
});
</script>
</body>
</html>

标签：菜单,05HUI,hui,HUI,header,meuns,cancel
来源： https://blog.51cto.com/u_15294985/3006310