responsivewebframework
Version:
Jalasoft Foundation Front End Framework ========================================
90 lines (79 loc) • 2.34 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Context menu</title>
<link rel="stylesheet" href="../../../dist/css/frontend-framework.min.css">
<script type="text/javascript" src="../vendor/jquery.min.js"></script>
<script type="text/javascript" src="../../../src/js/context-menu.js"></script>
<style>
.container {
background-color: #08c;
height: 300px;
width: 300px;
}
.container2 {
background-color: #999;
height: 150px;
width: 300px;
}
</style>
</head>
<body>
<div class="container">
</div>
<div>
<span class="second-option">Context menu <span id="context-menu-second" class="icon-next-xbase"></span> </span>
<div class="container2">
<p>kdfkfdkfdlfdkldf </p>
</div>
</div>
<ul class="context-menu container">
<li>
<span class="icon-plus-xbase"></span>
Option 1
</li>
<li>
Option 2
<ul>
<li><a href="www.google.com">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
<li>
<span class="icon-products-xbase"></span>
<a href="#">Option 3</a>
</li>
<li>
<a href="#">Option 4</a>
</li>
<li class="disabled" >
<span class="icon-phonecall-xbase"></span>
<a href="#">Option 5</a>
</li>
<li>
Option 6
<ul>
<li><a href="#">Option 1</a></li>
<li>
<span class="icon-phonecall"></span>
<a href="#">Option 2</a>
</li>
<li>
<span class="icon-phonecall"></span>
Option 4
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 3</a></li>
<li>
<span class="icon-phonecall-xbase"></span>
<a href="#">Option 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>