Who could please tell me what would be the simplest and cleanest way to do exactly the same sidebar navigation as this website : http://www.makerstudios.com/ (but on the left side)
Using bootstrap 3
Thanks.
Here is a super useful plugin / add-on for Bootstrap 3. It is called Jasny Bootstrap and among the many features, one is an off-canvas navigation. The looks and feels of it is very much like Bootstrap, so if that is your framework of choice (like for me), I highly recommend this. I had some issue with the sidebar closing automatically after each click in the menu, so the fix for that (if you need it) was to add data-autohide="false" to the button that opens the panel. This way it stays open until the user clicks on a 'CLOSE' link.
<a data-toggle="offcanvas" data-target=".navmenu" data-canvas="body" data-autohide="false">CLICK</a>
I found this fiddle it may help you as well Demo
HTML
<body>
<nav class='sidebar sidebar-menu-collapsed'> <a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-align-justify'></span>
</a>
<ul class='level1'>
<li class='active'> <a class='expandable' href='#' title='Dashboard'>
<span class='glyphicon glyphicon-home collapsed-element'></span>
<span class='expanded-element'>Dashboard</span>
</a>
<ul class='level2'>
<li> <a href='#' title='Traffic'>Traffic</a>
</li>
<li> <a href='#' title='Conversion rate'>Conversion rate</a>
</li>
<li> <a href='#' title='Purchases'>Purchases</a>
</li>
</ul>
</li>
<li> <a class='expandable' href='#' title='APIs'>
<span class='glyphicon glyphicon-wrench collapsed-element'></span>
<span class='expanded-element'>APIs</span>
</a>
</li>
<li> <a class='expandable' href='#' title='Settings'>
<span class='glyphicon glyphicon-cog collapsed-element'></span>
<span class='expanded-element'>Settings</span>
</a>
</li>
<li> <a class='expandable' href='#' title='Account'>
<span class='glyphicon glyphicon-user collapsed-element'></span>
<span class='expanded-element'>Account</span>
</a>
</li>
</ul> <a href='#' id='logout-icon' title='Logout'>
<span class='glyphicon glyphicon-off'></span>
</a>
</nav>
</body>
css
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
body {
background: none repeat scroll 0 0 white;
}
nav.sidebar-menu-collapsed {
width: 44px;
}
nav.sidebar-menu-expanded {
width: auto;
}
nav.sidebar {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background: none repeat scroll 0 0 #0099ff;
color: white;
padding: 20px 10px;
}
nav.sidebar a#justify-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
}
nav.sidebar a#logout-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
position: absolute;
bottom: 10px;
left: 10px;
}
nav.sidebar ul.level1 {
margin: 0;
padding: 0;
margin-top: 60px;
}
nav.sidebar ul.level1 li {
margin: 0;
padding: 0;
margin-top: 20px;
list-style-type: none;
}
nav.sidebar ul.level1 li a.expandable {
outline: 0;
display: block;
position: relative;
width: 100%;
height: 30px;
color: white;
text-decoration: none;
text-align: left;
padding: 4px 4px 4px 0px;
font-size: 20px;
}
nav.sidebar ul.level1 li a.expandable:hover {
color: #bbbbbb;
}
nav.sidebar ul.level1 li a.expandable span.expanded-element {
display: none;
font-size: 11px;
position: relative;
bottom: 5px;
}
nav.sidebar ul.level1 li.active {
margin-left: -4px;
}
nav.sidebar ul.level1 li.active a.expandable {
background: none repeat scroll 0 0 black;
border-radius: 4px;
color: white !important;
width: 30px;
padding: 4px;
}
nav.sidebar ul.level1 li.active a.expandable:hover {
color: white !important;
}
nav.sidebar ul.level1 ul.level2 {
margin: 20px 6px 20px 30px;
padding: 0;
display: none;
}
nav.sidebar ul.level1 ul.level2 li {
margin: 0;
padding: 0;
margin-top: 10px;
padding-bottom: 10px;
list-style-type: none;
border-bottom: solid white 1px;
}
nav.sidebar ul.level1 ul.level2 li:last-child {
border-bottom: none;
}
nav.sidebar ul.level1 ul.level2 li a {
text-decoration: none;
outline: 0;
color: white;
text-decoration: none;
font-size: 11px;
}
jQuery
(function () {
$(function () {
var SideBAR;
SideBAR = (function () {
function SideBAR() {}
SideBAR.prototype.expandMyMenu = function () {
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
SideBAR.prototype.collapseMyMenu = function () {
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
SideBAR.prototype.showMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").show();
};
SideBAR.prototype.hideMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").hide();
};
SideBAR.prototype.showActiveSubMenu = function () {
$("li.active ul.level2").show();
return $("li.active a.expandable").css({
width: "100%"
});
};
SideBAR.prototype.hideActiveSubMenu = function () {
return $("li.active ul.level2").hide();
};
SideBAR.prototype.adjustPaddingOnExpand = function () {
$("ul.level1 li a.expandable").css({
padding: "1px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "1px 4px 4px 4px"
});
};
SideBAR.prototype.resetOriginalPaddingOnCollapse = function () {
$("ul.nbs-level1 li a.expandable").css({
padding: "4px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "4px"
});
};
SideBAR.prototype.ignite = function () {
return (function (instance) {
return $("#justify-icon").click(function (e) {
if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
instance.adjustPaddingOnExpand();
instance.expandMyMenu();
instance.showMenuTexts();
instance.showActiveSubMenu();
$(this).css({
color: "#000"
});
} else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
instance.resetOriginalPaddingOnCollapse();
instance.collapseMyMenu();
instance.hideMenuTexts();
instance.hideActiveSubMenu();
$(this).css({
color: "#FFF"
});
}
return false;
});
})(this);
};
return SideBAR;
})();
return (new SideBAR).ignite();
});
}).call(this);
EDIT: I've added one more option for bootstrap sidebars.
There are actually three manners in which you can make a bootstrap 3 sidebar. I tried to keep the code as simple as possible.
Fixed sidebar
Here you can see a demo of a simple fixed sidebar I've developed with the same height as the page
Sidebar in a column
I've also developed a rather simple column sidebar that works in a two or three column page inside a container. It takes the length of the longest column. Here you can see a demo
Dashboard
If you google bootstrap dashboard, you can find multiple suitable dashboard, such as this one. However, most of them require a lot of coding. I've developed a dashboard that works without additional javascript (next to the bootstrap javascript). Here is a demo
For all three examples you off course have to include the jquery, bootstrap css, js and theme.css files.
For making the sidebar transposable you need a simple javascript file that transposes the desired sidebar, such as given in other answers on this page or here
Slidebar
If you want the sidebar to hide on pressing a button this is also possible with only a little javascript.Here is a demo
This solution is only for people who use Angular. Using ng-class of Angular, we can hide and show the side bar.
http://jsfiddle.net/DVE4f/359/
<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
<div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
Sidebar
</div>
<div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'" id="colMain" >
<button ng-click='toggle()' >Sidebar Toggle</a>
</div>
</div>
</div>
.
function AppCtrl($scope) {
$scope.showgraphSidebar = false;
$scope.toggle = function() {
$scope.showgraphSidebar = !$scope.showgraphSidebar;
}
}
Related
I am having difficulty of aligning this un-ordered list inside another order list can anyone help me how to fix this below is my code thanks.
css
<style>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:black;
color:white;
min-width: 160px;
overflow: none;
z-index: 1;
}
.show {display: block;}
</style>
JS
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Html
<h5>Menu</h5>
<ul class="dropdown">
<li class="bullet-arrow"><span style="font-size: 90%;">About us</span></li>
<li class="bullet-arrow"><span style="font-size: 90%;">Blog</span></li>
<li class="bullet-arrow"><span style="font-size: 90%;">Contact</span></li>
<li onclick="myFunction()" class="dropbtn bullet-arrow"><span style="font-size: 90%;"><a>Terms & Conditions</a></span>
<ul id="myDropdown" class="dropdown-content">
<li style="font-size: 90%;">Privacy Policy</li>
<li style="font-size: 90%;">Service Agreement</li>
<li style="font-size: 90%;">Terms Of Use</li>
<li style="font-size: 90%;">Vendor Agreement</li>
</ul>
</li>
</ul>
You just need to add padding-left: 0 in your .dropdown-content. Its as simple as that.
If you want, you can try different values. I think in google chrome its 40px by default
Update:
I am seeing .dropbtn is having a padding: 16px. Make sure it is not interfering. If it is try adding begative margin also.
Eg:
ul ul.dropdown-content {
padding-left: 0;
margin-left: -16px
}
In CSS, try adding .dropdown-content{ float: left;} property. Complete code:
.dropdown-content {
display: none;
position: absolute;
background-color:black;
color:white;
min-width: 160px;
overflow: none;
z-index: 1;
float left;
}
I've tried everything, researched and tooled around but I really don't know CSS that well. I'm trying to have the headings stay the same width then have a transition drop down that has a description but expands wider than the heading section. Something like the example below, but to show and hide content on hover instead of on click.
The example HTML:
<div class="tabContainer" >
<ul class="digiTabs" id="sidebarTabs">
<li id="1" class="selected t">Overview</li>
<li id="2" class="t">Itinerary</li>
<li id="3" class="t">Destination Info</li>
</ul>
<div id="t1" style="display:none;" class="tabContent">...</div>
<div id="t2" style="display:none;" class="tabContent">...</div>
<div id="t3" style="display:none;" class="tabContent">...</div>
</div>
The example CSS:
.tabContainer {margin: 0;}
.tabContainer .digiTabs {
list-style: none;
display: block;
overflow: hidden;
margin: 0;
padding: 0px;
position: relative;
top: 1px;
}
.tabContainer .digiTabs li {
float: left;
background-color: #e7e5df;
padding: 5px 15px!important;
cursor: pointer;
border-bottom:none;
margin-right: 1px;
color: #801350;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
}
.tabContainer .digiTabs .selected {
background-color: #fff;
color: #393939;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
#tabContent {
padding: 10px;
background-color: #fff;
overflow: hidden;
float: left;
margin-bottom: 10px;
border: 1px solid #e1e1e1;
}
The example JS:
$(function(){
$(".t").bind("click",function(){
$(".tabContent").each(function(){
$(this).hide();
});
var id = $(this).attr("id");
$("#t"+id).show();
});
});
http://jsfiddle.net/NIkhar/NRkL9/2/
Any help would be appreciated.
try that fiddle
you don't need to use each, and I've added selected class handler
$(function(){
$(".t").hover(function(){
$(".tabContent").hide();
$('.t').removeClass('selected');
$(this).addClass('selected');
var id = $(this).attr("id");
$("#t"+id).show();
});
});
Just change this code:
$(function(){
$(".t").bind("click",function(){
$(".tabContent").each(function(){
$(this).hide();
});
var id = $(this).attr("id");
$("#t"+id).show();
});
});
Into this:
$(function(){
$(".t").hover(function() { /* ONLY THIS LINE HAS CHANGED */
$(".tabContent").each(function(){
$(this).hide();
});
var id = $(this).attr("id");
$("#t"+id).show();
});
});
I have a header with 2 dropdowns.
the dropdown menu position is absolute to it's wrapper container.
I want each dropdown menu width fit to the size of longest list entry. I am wondering if there is any solution without looping through li s and achieve it only using css?
<nav>
<div class="nav-dropdownContainer">
<div class="navdropdown nav-primary__dropdown">
<div class="navdropdown__text">
Themes
<i class="fa fa-chevron-down">+</i>
</div>
<ul class="navdropdown__list">
<li class="navdropdown__listItem">linktheme1</li>
<li class="navdropdown__listItem">linktheme2</li>
</ul>
</div>
<div class="navdropdown nav-primary__dropdown">
<div class="navdropdown__text">
tags
<i class="fa fa-chevron-down">+</i>
</div>
<ul class="navdropdown__list">
<li class="navdropdown__listItem">linktag1</li>
<li class="navdropdown__listItem">linktag2</li>
</ul>
</div>
</div>
</nav>
And CSS:
ul{
margin: 0;
padding: 0;
}
nav{
background-color: grey;
line-height: 35px;
}
.nav-dropdownContainer {
height: 70px;
width: 25%;
display: inline-block;
position: relative;
}
.navdropdown {
background-color: #455565;
display: inline-block;
border-right: 1px solid #fff;
height: 100%; }
.navdropdown:first-child {
border-left: 1px solid #fff; }
.navdropdown > ul {
margin: 0; }
.navdropdown:hover .navdropdown__text {
color: #fff; }
.navdropdown.open .navdropdown__text {
color: #fff; }
.navdropdown.open .navdropdown__list {
display: block; }
.navdropdown .fa-chevron-up,
.navdropdown .fa-chevron-down {
padding-left: 1rem;
font-size: 0.875rem; }
.navdropdown .navdropdown__text {
text-align: center;
cursor: pointer;
color: #ccc;
border-top: none;
padding: 1rem; }
.navdropdown__list {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
float: left;
width: 100%;
left: 0;
background-color: #455565;
list-style-type: none; }
.navdropdown__list .navdropdown__listItem {
width: 100%;
float: left;
padding: 1rem;
background-color: #374350;
margin: 0; }
.navdropdown__list .navdropdown__listItem > a {
text-decoration: none;
color: #fff;
cursor: pointer; }
.navdropdown__list .navdropdown__listItem:hover {
background-color: #374856; }
JS:
(function() {
// Cache DOM
var $body = $('body'),
$window = $(window),
_dropdownClassName = '.navdropdown',
$dropdownContainer = $('.nav-dropdownContainer');
$body.on('click', _dropdownClassName, toggleDropdown);
function closeAllDropdowns(){
$(_dropdownClassName).removeClass('open');
$('.navdropdown__text i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
/**
* toggle dropdown
*/
function toggleDropdown(){
const $this = $(this);
const $thisArrow = $this.find('.navdropdown__text i');
var leftPosition = $this.offset().left - $dropdownContainer.offset().left;
console.log('leftPosition', leftPosition);
if (window.Modernizr.mq('only screen and (max-width: 64em)')) {
$this.find('.navdropdown__list').css('left', 0);
}else{
if(leftPosition > 0){
$this.find('.navdropdown__list').css('left', leftPosition+'px');
}
}
if($thisArrow.hasClass('fa-chevron-down')){
closeAllDropdowns();
$this.addClass('open');
$thisArrow.removeClass('fa-chevron-down').addClass('fa-chevron-up');
}else{
closeAllDropdowns();
}
}
})();
Code Pen link: http://codepen.io/neginbasiri/pen/Xjgwkx
Add this to your navdropdown class : min-width: 40%;
It sets the minimum width of them to 40% of it's container width(If you have more items set this percentage proportional to the number of items).
If you want it be exactly like the biggest width involves some javascripts I don't recommend that way.
I have a snippet to let you better understand my question:
$(window).load(function() {
var total;
$(document).ready(function() {
$('#dupe').click(function() {
$('#uploadForms').prepend($('#htmlTemplate').html());
$($('#uploadForms .upload_form')[0]).animate({
height: $($('#uploadForms .upload_form')[$('#uploadForms .upload_form').size() - 1]).css('height'),
opacity: 1
}, 500);
totalForms();
$(".upload_form").each(function() {
if (typeof $(this).find('a.close')[0] === 'undefined') {
if ($('#uploadForms .upload_form').size() > 1) $(this).prepend('<a class="close">x</a>');
}
});
$(".upload_form").on("click", ".close", function() {
$(this).parent().animate({
height: 0,
opacity: 0,
paddingTop: 0,
paddingBottom: 0
}, 500, function() {
$(this).parent().remove();
totalForms()
});
if ($('#uploadForms .upload_form').size() - 1 <= 1) $('#uploadForms .upload_form').find('a.close').remove();
});
});
function totalForms() {
total = $('#uploadForms .upload_form').size();
$('#total').html(total);
}
});
});
.upload_form {
background-color: rgba(0, 0, 0, .3);
padding: 16px 64px 10px 76px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
margin-bottom: 10px;
}
.coverArt {
margin-right: 48px;
margin-bottom: 36px;
}
label input,
label textarea {
width: 252px;
}
.info {
display: block;
vertical-align: top;
}
.close {
float: right;
color: white;
margin: 10px;
display: block;
cursor: hand;
border-radius: 100%;
cursor: pointer;
width: 18px;
height: 18px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
}
.close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
ol {
counter-reset: li;
margin-left: 0;
padding-left: 0;
}
ol > li {
position: relative;
margin: 0 0 6px 2em;
padding: 0px 0px 8px;
list-style: none;
border-top: 2px solid #666;
}
ol > li:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: -2px;
left: -2em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 2em;
margin-right: 8px;
padding: 4px;
border-top: 2px solid #666;
color: #fff;
background: #666;
font-weight: bold;
font-family: "Helvetica Neue", Arial, sans-serif;
text-align: center;
}
li ol,
li ul {
margin-top: 6px;
}
ol ol li:last-child {
margin-bottom: 0;
}
.template {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="Add file..." id="dupe">
<input type="button" value="Upload file(s)" id="dupe">
<hr>
<p>Total: <span id="total">1</span></p>
<div id="htmlTemplate" class="template">
<li>
<div class="upload_form" style="height:0;opacity:0;">
<span class="number"></span>
<a class="close">x</a>
<div class="info">
<p>Filler</p>
</div>
</div>
</li>
</div>
<ol id="uploadForms">
<li>
<div class="upload_form">
<span class="number"></span>
<a class="close">x</a>
<div class="info">
<p>Filler</p>
</div>
</div>
</li>
</ol>
In this demo if you click "Add file..." then a new list element will be added with a new <div> inside. My question is: how to reverse the order of the counter?
Related CSS:
ol {
counter-reset:li;
}
ol > li {
position:relative;
margin:0 0 6px 2em;
padding: 0px 0px 8px;
list-style:none;
border-top:2px solid #666;
}
ol > li:before {
content: counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-2em;
box-sizing:border-box;
width:2em;
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
I don't have a pure CSS solution, but your page is already quite JS-heavy, so I think it will be okay.
For the li add
counter-increment: li -1;
To make it count backwards. This means that it can't reset at 0, but it has to reset at the total elements.
For ol start with
counter-reset:li 2;
And then update your JS:
$('#total').html(total);
$("ol").css('counter-reset', 'li ' + (+total + 1));
http://jsfiddle.net/ExplosionPIlls/ArZUW/1/
Here's another solutions very similar to the one by Explosion Pills: http://jsfiddle.net/pN6Fx/
CSS
ol{
list-style-type: none;
list-style-position: inside;
}
li:before{
content: counter(list-items) '. ';
counter-increment: list-items -1;
}
HTML
<ol style="counter-reset: list-items 5;">
<li>An element</li>
<li>An element</li>
<li>Another element</li>
<li>A third element</li>
</ol>
You just need to update counter-reset property via JavaScript
Following this page http://www.impressivewebs.com/reverse-ordered-lists-html5/ exists the reversed attribute for the <ol> element.
Bad enough I don't understand if is supported
If you're looking for a pure css solution and support browsers with Flexbox, you can take advantage of the flex-direction property to reverse the order of the list items.
This would give the appearance of a reversed list, but the DOM order wouldn't actually change.
Although the browser support is currently poor, instantiating a <reversed-counter-name> via the reversed() function is a pure CSS way to do what the OP is asking.
You can instantiate this on an <ol> like this:
ol {
counter-reset: reversed(list-item) // or any other counter name in scope
}
where list-item is the name of the stylesheet's default counter.
Here is a JSFiddle demo - it currently needs to be run in Firefox due to browser support limitations.
I am trying to create a dropdown menu that when you click it will open up a ul. The thing is I want the "View More" button to always be exactly where it is and the dropdown to open up centered below it.
if you go to the link below you will see what i mean. it opens up exactly like I want it to, but if you close the dropdown by clicking "View More" you will see the header move to the left when i want it to stay exactly where it is
I am building this to be able to be used in many many different locations so "hardcoding" sizes is not an option.
Please help! :)
HTML
<div id="testcontainer">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-340">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-340">
<li>Google</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer2">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-350">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-350">
<li>Google</li>
<li>THIS IS A TEST FOR WIDER SHIT</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer3">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-400">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-container-400">
<li>GOOOOOOOOOOOOOOOOOOOOOGLEASDASDSASD</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
CSS
#testcontainer {
position: absolute;
top: 20px;
left: 100px;
text-align: center;
}
#testcontainer2 {
position: absolute;
top: 20px;
left: 150px;
text-align: center;
}
#testcontainer3 {
position: absolute;
top: 200px;
left: 500px;
text-align: center;
}
.dropdown-activator-active {
background-color: #000;
color: #fff;
}
.dropdown a {
display: inline-block;
}
.dropdown-activator {
display: inline-block;
border: 1px solid black;
padding: 3px;
}
.dropdown-content {
visibility: hidden;
height: 0;
opacity: 0;
position: relative;
text-align: left;
margin: 0 auto;
border: 1px solid black;
}
.dropdown-content-active {
visibility: visible;
height: auto;
opacity: 1;
}
.dropdown-content ul li {
list-style: none;
}
JQuery
$(function(){
$(".dropdown-activator").click(function() {
$this = $(this);
var current = $this.attr('dropdownContent');
if (!$(current).hasClass('dropdown-content-active')) {
$this.addClass("dropdown-activator-active", 100);
$(current).addClass('dropdown-content-active', 100, function() {
$('html').unbind('click');
$('html').not($this).one('click', function() {
$(current).prev().removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100);
});
});
} else {
$this.removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100)
}
});
});
you can see an example of it here www.chrisworrell.com (temporary)
display: none; removes your element from the document flow, which is why your parent div resizes. On the other hand, visibility: hidden; hides your element while keeping it in the document flow.
What you could do is instead of manipulating the display property of your <ul> element, set visibility: hidden; and height: 0; That way the unexpanded link will continue to use the width of the UL element it is bundled with.
It's kind of hacky, but should get the job done.
In order to manipulate visibility instead of display none with jQuery UI, use .animate({opacity: 1}) for fadeIn() and .animate({opacity: 0}) for fadeOut()