Skip to content

Instantly share code, notes, and snippets.

@hughjfchen

hughjfchen/index.html

Created May 15, 2018 07:36
Show Gist options
  • Save hughjfchen/40af17f9ffc8b85ef47ae7adaf941c94 to your computer and use it in GitHub Desktop.
Save hughjfchen/40af17f9ffc8b85ef47ae7adaf941c94 to your computer and use it in GitHub Desktop.
Download ZIP
Semantic ui Sidebar + Navbar
Raw
index.html
<div class="ui sidebar vertical left menu overlay visible" style="-webkit-transition-duration: 0.1s; overflow: visible !important;">
<div class="item logo">
<img src="img/logo.png" /><img src="img/thumblogo.png" style="display: none" />
</div>
<div class="ui accordion">
<a class="title item">Dashboard <i class="dropdown icon"></i>
</a>
<div class="content">
<a class="item" href="dashboard.html">Dashboard
</a>
</div>
<div class="title item">
<i class="dropdown icon"></i> Apps
</div>
<div class="content">
<a class="item" href="inbox.html">Inbox
</a>
<a class="item" href="mail.html">Mailbox
</a>
<a class="item" href="chat.html">Chat
</a>
<a class="item" href="contacts.html">Contacts
</a>
<a class="item" href="photoeditor.html">Photo Editor
</a>
<a class="item" href="calendar.html">Calendar
</a>
<a class="item" href="filter.html">Filter
</a>
<a class="item" href="todo.html">Todo
</a>
</div>
<div class="title item">
<i class="dropdown icon"></i> Layouts
</div>
<div class="content">
<a class="item" href="sidebar.html">Sidebar
</a>
<a class="item" href="menu.html">Nav
</a>
<a class="item" href="animatedicon.html">Animated Icon
</a>
<a class="item" href="box.html">Box
</a>
<a class="item" href="cards.html">Cards
</a>
<a class="item" href="color.html">Colors
</a>
<a class="item" href="comment.html">Comment
</a>
<a class="item" href="embed.html">Embed
</a>
<a class="item" href="faq.html">Faq
</a>
<a class="item" href="feed.html">Feed
</a>
<a class="item" href="gallery.html">Gallery
</a>
<a class="item" href="grid.html">Grid
</a>
<a class="item" href="header.html">Header
</a>
<a class="item" href="timeline.html">Timeline
</a>
<a class="item" href="message.html">Message
</a>
<a class="item" href="price.html">Price
</a>
</div>
<a class="item">
<b>Components</b>
</a>
<div class="title item">
<i class="dropdown icon"></i> UI-Kit
</div>
<div class="content">
<a class="item" href="accordion.html">Accordion
</a>
<a class="item" href="breadcrumb.html">Breadcrumb
</a>
<a class="item" href="button.html">Button
</a>
<a class="item" href="divider.html">Divider
</a>
<a class="item" href="dropdown.html">Dropdown
</a>
<a class="item" href="flag.html">Flag
</a>
<a class="item" href="icon.html">Icon
</a>
<a class="item" href="image.html">Image
</a>
<a class="item" href="label.html">Label
</a>
<a class="item" href="list.html">List
</a>
<a class="item" href="modal.html">Modal
</a>
<a class="item" href="notification.html">Notification
</a>
<a class="item" href="alert.html">Alert
</a>
<a class="item" href="progress.html">Progress
</a>
<a class="item" href="range-v1.html">Range Semantic
</a>
<a class="item" href="range-v2.html">Range Material
</a>
<a class="item" href="rating.html">Rating
</a>
<a class="item" href="tab.html">Tab
</a>
<a class="item" href="tooltip.html">Tooltip
</a>
<a class="item" href="transition.html">Transition
</a>
</div>
<div class="title item">
<i class="dropdown icon"></i> Pages
</div>
<div class="content">
<a class="item" href="profile.html">Profile
</a>
<a class="item" href="settings.html">Settings
</a>
<a class="item" href="blank.html">Blank
</a>
<a class="item" href="signin.html">Sign In
</a>
<a class="item" href="signup.html">Sign Up
</a>
<a class="item" href="forgotpassword.html">Forgot Password
</a>
<a class="item" href="lockme.html">Lock Me Screen
</a>
<a class="item" href="404.html">Error 404
</a>
<a class="item" href="comingsoon.html">Coming Soon
</a>
</div>
<div class="title item">
<i class="dropdown icon"></i> Form
</div>
<div class="content">
<a class="item" href="formelements.html">Form Element
</a>
<a class="item" href="input.html">Input
</a>
<a class="item" href="formvalidation.html">Form Validation
</a>
<a class="item" href="editor.html">Html Editor
</a>
</div>
<div class="title item">
<i class="dropdown icon"></i> Tables
</div>
<div class="content">
<a class="item" href="table.html">Static Table
</a>
<a class="item" href="datatable.html">Datatable
</a>
<a class="item" href="editable.html">Editable
</a>
</div>
<div class="title item">
<i class="dropdown icon"></i> Chart
</div>
<div class="content">
<a class="item" href="chart.html">Charts 1
</a>
<a class="item" href="chart-2.html">Charts 2
</a>
<a class="item" href="chart-3.html">Charts 3
</a>
</div>
</div>
<div class="ui dropdown item displaynone">
<z>Dashboard</z>
<i class="icon demo-icon heart icon-heart"></i>
<div class="menu">
<div class="header">
Dashboard
</div>
<div class="ui divider"></div>
<a class="item" href="dashboard.html">Dashboard
</a>
</div>
</div>
<div class="ui dropdown item displaynone">
<z>Layout</z>
<i class="icon demo-icon world icon-globe"></i>
<div class="menu">
<div class="header">
Layout
</div>
<div class="ui divider"></div>
<a class="item" href="inbox.html">Inbox
</a>
<a class="item" href="mail.html">Mailbox
</a>
<a class="item" href="chat.html">Chat
</a>
<a class="item" href="contacts.html">Contacts
</a>
<a class="item" href="photoeditor.html">Photo Editor
</a>
<a class="item" href="calendar.html">Calendar
</a>
<a class="item" href="filter.html">Filter
</a>
<a class="item" href="todo.html">Todo
</a>
</div>
</div>
<div class="ui dropdown item displaynone">
<z>Pages</z>
<i class="icon demo-icon icon-params alarm"></i>
<div class="menu">
<div class="header">
Layouts
</div>
<div class="ui divider"></div>
<a class="item" href="sidebar.html">Sidebar
</a>
<a class="item" href="menu.html">Nav
</a>
<a class="item" href="animatedicon.html">Animated Icon
</a>
<a class="item" href="box.html">Box
</a>
<a class="item" href="cards.html">Cards
</a>
<a class="item" href="color.html">Colors
</a>
<a class="item" href="comment.html">Comment
</a>
<a class="item" href="embed.html">Embed
</a>
<a class="item" href="faq.html">Faq
</a>
<a class="item" href="feed.html">Feed
</a>
<a class="item" href="gallery.html">Gallery
</a>
<a class="item" href="grid.html">Grid
</a>
<a class="item" href="header.html">Header
</a>
<a class="item" href="timeline.html">Timeline
</a>
<a class="item" href="message.html">Message
</a>
<a class="item" href="price.html">Price
</a>
</div>
</div>
</div>
<div class="pusher">
<div class="ui menu asd borderless" style="border-radius: 0!important; border: 0; margin-left: 260px; -webkit-transition-duration: 0.1s;">
<a class="item openbtn">
<i class="icon content"></i>
</a>
<a class="item">Messages
</a>
<div class="right menu">
<div class="ui dropdown item">
Language <i class="dropdown icon"></i>
<div class="menu">
<a class="item">English</a>
<a class="item">Russian</a>
<a class="item">Spanish</a>
</div>
</div>
<div class="item">
<div class="ui primary button">Sign Up</div>
</div>
</div>
</div>
</div>
Raw
script.js
$(".openbtn").on("click", function() {
$(".ui.sidebar").toggleClass("very thin icon");
$(".asd").toggleClass("marginlefting");
$(".sidebar z").toggleClass("displaynone");
$(".ui.accordion").toggleClass("displaynone");
$(".ui.dropdown.item").toggleClass("displayblock");
$(".logo").find('img').toggle();
})
$(".ui.dropdown").dropdown({
allowCategorySelection: true,
transition: "fade up",
context: 'sidebar',
on: "hover"
});
$('.ui.accordion').accordion({
selector: {
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
Raw
style.css
.marginlefting {
margin-left: 60px !important;
}
.displaynone {
display: none !important;
}
.displayblock {
display: block !important;
}
.sidebar .item i {
font-size: 24px;
margin-top: -5px !important;
}
.logo {
height: 48px !important;
padding: 10px !important;
}
.logo img {
width: 100% !important;
height: 38px !important;
}
.title.item {
padding: .92857143em 1.14285714em !important;
}
.dropdown .menu .header {
padding-top: 3.9px!important;
padding-bottom: 3.9px!important;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment