我是semantic-ui的新手,我在创建菜单项的html链接时遇到问题,下面是我的测试代码:
<div class="ui blue borderless main menu">
<a href="#" class="blue item" data-vivaldi-spatnav-clickable="1">
Home
</a>
<a href="#" class="ui floated dropdown item" data-vivaldi-spatnav-clickable="1">
Products
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://www.google.com">Google</a>
<a class="item" href="http://www.zdnet.com">Zdnet</a>
</div>
</a>
我看到的是: 主页产品&gt;谷歌Zdnet
我想要的是将Google和Zdnet显示为产品项目:
首页|产品|
|谷歌|
| ZDNET |
有人可以告诉我我需要对我的代码做些什么来实现这个目标吗?
由于
答案 0 :(得分:1)
确保您在jQuery
部分包含semantic.min.js
和<head>
个库(jQuery优先!)。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
</head>
<body>
<div class="ui blue borderless main menu">
<a href="#" class="blue item" data-vivaldi-spatnav-clickable="1">Home</a>
<div class="ui dropdown item" data-vivaldi-spatnav-clickable="1">
Products
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://www.google.com">Google</a>
<a class="item" href="http://www.zdnet.com">Zdnet</a>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>