Skip to content

Instantly share code, notes, and snippets.

@C-Stevens

C-Stevens/semantic-ui_tab_sample.html

Created January 29, 2016 06:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save C-Stevens/757e0e1bb3f7bbc04fe1 to your computer and use it in GitHub Desktop.
Save C-Stevens/757e0e1bb3f7bbc04fe1 to your computer and use it in GitHub Desktop.
Download ZIP
Sample HTML template that properly implements Semantic's bizarre (yet cool) tab feature.
Raw
semantic-ui_tab_sample.html
<!DOCTYPE html>
<html>
<head>
<title>Colin J. Stevens</title>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
</head>
<body>
<div class="ui main text container">
<h1 class="ui header">Colin Stevens</h1>
<p>foo bar baz</p>
</div>
<div id="menu_bar">
<div class="ui pointing links secondary menu">
<div class="ui text container">
<a class="item" data-tab="about">About</a>
<a href="#" class="item">Blog</a>
<a class="item" data-tab="cv">CV</a>
<a class="item" data-tab="contact">Contact</a>
</div>
</div>
<div class="ui tab segment" data-tab="about">
About
</div>
<div class="ui tab segment" data-tab="cv">
CV
</div>
<div class="ui tab segment" data-tab="contact">
Contact
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://colinjstevens.com/res/js/jquery.address.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$('#menu_bar .menu .item').tab({
history : true,
context : '#menu_bar',
historyType : 'state',
path : '/',
});
</script>
<style type="text/css">
.main.container {
margin-top: 2em;
}
.secondary.menu {
margin-top: 4em;
border-radius: 0;
border: none;
box-shadow: none;
transition:
box-shadow 0.5s ease,
padding 0.5s ease
;
}
.secondary.menu.fixed {
background-color: #FFFFFF;
border: 1px solid #DDD;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment