14.1 基础菜单样式

  在Semantic-UI中使用class="ui menu"。

示例：定义基础菜单样式

<div class="ui menu">

    <div class="item">

        <a href="">首页</a>

    </div>

    <div class="item">

        <a href="">今日热点</a>

    </div>

    <div class="item">

        <a href="">免责申明</a>

    </div>

</div>

示例：定义右移动导航

<div class="ui container">

    <div class="ui menu">

        <div class="item">

            <a href="">首页</a>

        </div>

        <div class="item">

            <a href="">今日热点</a>

        </div>

        <div class="item">

            <a href="">免责申明</a>

        </div>

        <div class="right item">

            <a href="">注册</a>

        </div>

        <div class="item">

            <a href="">登陆</a>

        </div>

    </div>

</div>

示例：在菜单中加入输入框

<div class="ui container">

    <div class="ui menu">

        <div class="item">

            <a href="">首页</a>

        </div>

        <div class="item">

            <a href="">今日热点</a>

        </div>

        <div class="item">

            <a href="">免责申明</a>

        </div>

        <div class="right menu">

            <div class="ui transparent icon input">

                <input type="text" placeholder="搜索...">

                <i class="search link icon"></i>

            </div>

        </div>

        <div class="right item">

            <a href="">注册</a>

        </div>

        <div class="item">

            <a href="">登陆</a>

        </div>

    </div>

</div>

14.2 垂直菜单样式

  在网页中，一般后台界面使用垂直菜单比较多，但是这种菜单的定义比较简单。

示例：定义垂直菜单

<div class="ui container">

    <div class="ui vertical menu">

        <div class="item">

            <a href="">新建</a>

        </div>

        <div class="item">

            <a href="">编辑</a>

        </div>

        <div class="item">

            <a href="">修改</a>

        </div>

        <div class="item">

            <a href="">删除</a>

        </div>

    </div>

</div>

示例：在菜单前面加上图标样式，同时为图标设置颜色

<div class="ui container">

    <div class="ui vertical menu">

        <div class="item">

            <a href="">

                <i class="file green icon"></i>

                新建

            </a>

        </div>

        <div class="item">

            <a href="">

                <i class="edit blue icon"></i>

                编辑

            </a>

        </div>

        <div class="item">

            <a href="">

                <i class="trash alternate red icon"></i>

                删除

            </a>

        </div>

    </div>

</div>

14.3 下拉菜单样式

  在Semantic-UI中定义下拉菜单的样式比较多，比如在div中定义，select中定义等。

示例：定义基础下拉菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Semantic UI </title>

    <!-- 使用CDN导入js和css 文件-->

    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>

    <script>

        $(function () {

            $(".dropdown").dropdown();

        })

    </script>

</head>

<body>

    <div class="ui container">

        <div class="ui dropdown">

            <div class="text">课程</div>

            <i class="dropdown icon"></i>

            <div class="menu">

                <div class="item">JavaWeb开发</div>

                <div class="item">Web前端开发</div>

                <div class="item">JavaSE开发</div>

            </div>

        </div>

    </div>

</body>

</html>

示例：使用select来定义下拉菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Semantic UI </title>

    <!-- 使用CDN导入js和css 文件-->

    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>

    <script>

        $(function () {

            $(".ui.dropdown").dropdown();

        })

    </script>

</head>

<body>

    <div class="ui container">

        <select name="" id="" class="ui dropdown">

            <option value="">性别</option>

            <option value="1">男</option>

            <option value="2">女</option>

        </select>

    </div>

</body>

</html>

14.4 定义二级菜单样式

  在网页头部一本都会采用二级菜单的操作，用多级菜单按钮供用户使用。

示例：定义二级菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Semantic UI </title>

    <!-- 使用CDN导入js和css 文件-->

    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>

    <script>

        $(function () {

            $(".ui.dropdown").dropdown();

        })

    </script>

</head>

<body style="padding: 20px;">

<div class="ui container">

    <div class="ui menu">

        <div class="item">

            <i class="home icon"></i>

            <a href="">首页</a>

        </div>

        <div class="item">

            <div class="ui dropdown">

                <i class="book icon"></i>

                <div class="text">课程</div>

                <i class="dropdown icon"></i>

                <div class="menu">

                    <a href="" class="item">JavaWeb课程</a>

                    <a href="" class="item">JAVASE课程</a>

                    <a href="" class="item">Struts2.x课程</a>

                </div>

            </div>

        </div>

        <div class="item">

            <i class="paperclip icon"></i>

            <a href="">关于</a>

        </div>

    </div>

</div>

</body>

</html>

14、Semantic-UI之菜单样式的更多相关文章

  1. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作

    在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...

  3. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  4. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  5. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  6. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  7. 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

  8. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

  9. 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

随机推荐

  1. Shiro的校验Session是否过期处理的过程

    首先开启定时扫描活跃的session进行校验 <!-- shiro会话管理 --> <!-- 即用户登录后就是一次会话,在没有退出之前,它的所有信息都在会话中:会话可以是普通 Jav ...

  2. 【转】RocketMQ事务消费和顺序消费详解

    RocketMQ事务消费和顺序消费详解 转载说明:该文章纯转载,若有侵权或给原作者造成不便望告知,仅供学习参考. 一.RocketMq有3中消息类型 1.普通消费 2. 顺序消费 3.事务消费 顺序消 ...

  3. jaegeropentracing的Java-client

    关于jaegeropentracing的Java-client做记录如下: 1.依赖jar包 <!-- 以下jar包是jaegeropentracing依赖的日志jar -->slf4j- ...

  4. js判断是否ie浏览器或者浏览器版本

    var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like g ...

  5. 【314】putty 自动登录

    putty是一款好用的远程登录linux服务器软件,但每次输入用户名密码毕竟有些烦人,这里教你免用户名密码登陆. 本教程通过 *.bat 文件进行添加参数,下面为相应的代码: 方法一:(直接将密码/用 ...

  6. margin+absolute布局：右栏固定主内容自适应 demo

    margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300p ...

  7. 使用BlendingTexture实现简单的Terrain

    [使用BlendingTexture实现简单的Terrain] BlendingTexture,就是一张纹理,纹理内存储的数据用于其它去处的Alpha通道value.例如以下四张图需要混合在Terra ...

  8. shell判断文件类型和权限

    shell  判断文件类型. -d 文件 判断该文件是否存在,并且是否为目录(是目录为真) -e文件 判断该文件是否存在(存在为真) -f文件 判断该文件是否存在,并且是否为文件(是普通文件为真) - ...

  9. DNS处理模块dnspython

    一.介绍 官网:http://www.dnspython.org/ https://pypi.org/project/dnspython/ dnspython是Python的DNS工具包.它支持几乎所 ...

  10. SQL Server横向扩展：设计，实现与维护（2）- 分布式分区视图

    为了使得朋友们对分布式分区视图有个概念,也为了方便后面的内容展开,我们先看看下面一个图:     讲述分布式分区视图之前,很有必要将之与我们常常熟悉的分区表和索引进行区别. 首先,分布式分区视图是一个 ...