05HUI - 头部导航及菜单(hui-header)

简介: 05HUI - 头部导航及菜单(hui-header)

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>
目录
相关文章
03HUI -基础文本(hui-common-title)
03HUI -基础文本(hui-common-title)
50 0
|
6月前
|
Java
新闻发布项目——前台JSP界面newspages/news_read.jsp
新闻发布项目——前台JSP界面newspages/news_read.jsp
|
JavaScript
06HUI - 底部导航及新消息提示组件(hui-footer-icons)
06HUI - 底部导航及新消息提示组件(hui-footer-icons)
45 0
|
JavaScript
31HUI - 滚动公告组件(hui-scroll-news)
31HUI - 滚动公告组件(hui-scroll-news)
46 0
|
JavaScript
20HUI - 折叠面板(hui-accordion)
20HUI - 折叠面板(hui-accordion)
57 0
16HUI - 多功能菜单(hui.actionSheet)
16HUI - 多功能菜单(hui.actionSheet)
68 0
|
JavaScript
20HUI - 标签组件(hui-tags)
20HUI - 标签组件(hui-tags)
59 0
|
JavaScript
09HUI - 图片列表(hui-img-list-content)
09HUI - 图片列表(hui-img-list-content)
30 0
|
JavaScript
29HUI - 图标及九宫格(hui-speed-dial-icons)
29HUI - 图标及九宫格(hui-speed-dial-icons)
43 0