Develop Reference

Changing the direction in which an ul expands when a button is clicked

So I got a button which when clicked, toggles the visibility of an ul. My button element is a child of my footer, which is fixed to the bottom of my screen. The issue I am having is that when toggled, the ul expands downward instead of up. How would I go about making my ul expand upwards with the first li item starting from the bottom, with each succeeding li item stacking on top of the one before it.
Here is my code:
<footer class="web-stream">
<button type="button" class="active-stream">All</button>
<ul class="feed-list">
<li>feed 1</li>
<li>feed 2</li>
</ul>
</footer>
CSS
.web-stream {
background: green;
width: 100%
height: 2.3em;
margin: auto;
position: fixed;
bottom:0%;
left:0px;
right:0px;
}
.active-stream {
width: 9.5em;
height: 2.3em;
text-align: center;
}
.feed-list {
display: none;
}
Jquery:
jQuery(document).ready(function(){
jQuery(document).on('click','.active-stream', function(event) {
jQuery('.feed-list').toggle('fast'); //use 'slow'
});
});
Here's a JSFiddle.

If I understand your question properly, you just need to reverse the order of the list. If the content is dynamically generated then you could do this when you output the <li> tags. Otherwise the JS in this JSFiddle can accomplish the same thing.
I also moved the button to appear below the list to match your drawing.

jQuery Toggle does not show on window resize

I'm using jQuery slideToggle function and the media queries.
The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.
If I do not click on the toggle link, and resize the window back to large size, it works fine.
Demo to see the problem:
Please check the demo here, where you can see the problem:
http://jsfiddle.net/3Jj7J/
Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.
Here's my code:
HTML:
<div class="bar">
<a class="toggle" href="#">MAIN MENU</a>
</div>
<div class="nav">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
CSS:
.bar{
display: none;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
.nav ul {
display: none;
}
.bar{
display: block;
}
}
jQuery:
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});

add on window resize event handler :
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.show();
}
});
jsFiddle : http://jsfiddle.net/3Jj7J/1/
update: this is alternative solution (just remove inline display property, so it will use css rule).
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.css({'display':''});
}
});
DEMO

I've read your problem and tested it myself. Now, I've made the Link appear by doing the following:
CSS:
#bar {
display: none;
color: #000000;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
#nav ul {
display: none;
}
.bar{
display: block;
}
}
To see for yourself (http://jsfiddle.net/hSZ7t/) What I've done is changed your CSS. Instead of you using:
.bar {
It's now:
#bar {

Pushing down content on .slideToggle()

I'm having some trouble when designing a responsive layout as follows below:
If you browse to http://www.wickersleysixthform.net you can see this in action.
Basically I'm trying to create a responsive menu so in browsers of 768px and above you will see a normal horizontal navigation. Then for anything under 481px you will see the "three line" menu with a .slideToggle() effect on that once pressed drops down the menu.
I can sort of get this to work, but the .slideToggle() isn't pushing the rest of the content down which I need it to do. Also the three lines won't appear if I re-size my browser screen manually however if I resize then refresh the page it will do, but if I do that then the normal links in the larger screen size don't show. I hope that makes sense.
This is the jQuery I'm using for the toggle inside a jQuery(document).ready(function($) {});
/* getting viewport width */
var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
$(".top-nav").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$(".top-nav").slideToggle();
});
}
/* if is above or equal to 768px */
if (responsive_viewport >= 768) {
$(".top-nav").show();
}
Can anyone help? No doubt it's something simple but it's driving me insane. Possibly CSS based rather than the jQuery?
The CSS I'm using is as follows (in my base/mobile stylesheet).
.header {
background-color:#blue;
padding-top:10px;
height:50px;
}
#menu {
display:block;
font-size:1.75em;
position: absolute;
right: 10px;
top: 2px;
}
.top-nav {
display:none;
}
.top-nav.open {
display:block;
background:#blue;
}
In my 768 and up stylesheet:
.header {
padding-top:0;
height:70px;
position:fixed;
width:100%;
z-index:10;
}
#menu {
display:none;
}
.top-nav {
display:block;
}
My HTML structure:
<header class="header" role="banner">
<div id="inner-header" class="wrap clearfix">
<a rel="nofollow" href="http://www.wickersleysixthform.net">
<img id="logo" width="50px" height="36px" src="http://www.wickersleysixthform.net/wp-content/themes/sixthform/library/images/white.png">
</a>
<nav role="navigation">
<div id="menu">☰</div>
<ul id="menu-main-menu" class="nav top-nav clearfix">
<li>About</li>
<li>
Current Students
<ul class="sub-menu"></ul>
</li>
<li>Courses</li>
<li>Student Life</li>
<li>Prospectus</li>
<li>Apply</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>

The problem is that your header element has a fixed height of 50px. So when the menu expands the header stays the same height.
Removing the height or replacing it with min-height solves your problem

Equal spaced, full width menu?

I have a menu with four options which I need to sit below an image like so:
----------------------------------------------------------------
| This is an image |
----------------------------------------------------------------
Menu 1 Menu 2 Menu 3 Menu4
These size is responsive, so I'm positioning the menu items dynamically. My problem is how to calculate the menu widths so that the spacing is equal as well as Menu1 and Menu4 meeting the edge of the image.

Will you ever have any more than 4 menu items at a given time? If not you can easily just wrap the links within an unorded and assign the <li> widths to 25% each. See the below example:
HTML
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
overflow: hidden;
}
li {
float: left;
width: 25%;
}

If you have a fixed number of items, you can work out the percentage each one needs to be (like #Chris has shown).
If the amount of menu items can vary, you can use jQuery to determine the widths:
var imgWidth = $(".img").width();
var itemWidth = imgWidth / $("ul.menu li").length;
$("ul.menu li").width(itemWidth);
Here I'm getting the image's width, then dividing the width by the number of li elements, then applying this value as the width for each li element.
See Demo: http://jsfiddle.net/rwvhG/
In terms of the alignment, this can be done with CSS:
ul li
{
float:left;
text-align:center;
}
ul li:first-child
{
text-align:left;
}
ul li:last-child
{
text-align:right;
}
See Demo: http://jsfiddle.net/rwvhG/1/

You can do it entirely in CSS
Check this demo: http://jsfiddle.net/Gv7fZ/
HTML:
<div class="outer">
<img src="<put-image-url-here>">
<div class="menu">
<div class="menuitem">Menu 1</div>
<div class="menuitem">Menu 2</div>
<div class="menuitem">Menu 3</div>
<div class="menuitem">Menu 4</div>
</div>
</div>
CSS:
.outer {
margin: auto;
display: table-cell;
}
.menuitem {
float: left;
text-align: center;
width: 33%;
}
.menuitem:first-child {
text-align: left;
width: 16%;
}
.menuitem:last-child {
float: right;
text-align: right;
width: 16%;
}

Although you can use css to set 25% width this will not work so well if the menu items text width is very different. If you want it to be really exact then try the following:
HTML
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>​
JavaScript
$(document).ready( function( ) {
var widths = 0;
var items = $(".menu > li");
var menu_width = items.eq(0).parent().width();
// total width of all existing li
items.each( function( ) {
widths += $(this).width( );
});
var gap = parseInt( ( menu_width - widths ) / ( items.length - 1 ) );
// set widths of list items except for last one. Last li gets pushed to edge
items.slice( 0, -1 ).each( function( ) {
$(this).width( $(this).width() + gap );
});
});
​Fiddle here
However, if the width of your menu items is pretty much the same you will probably be better off using CSS.

If your layout is responsive then set your menu items to be 25% width each and then set the last child to be text-align:right so that it lines up with the right margin.
#Menu ul li {text-align:left;display:inline-block;width:25%}
#Menu ul li:last-child {text-align:right}

CSS single select list example

I am looking for a click based single select list. Instead of the normal drop down list, I want an overlay menu (similar to how we see on facebook when we change privacy settings, the single select list that appears). Is that CSS based or any code examples to creating a similar list? All the lists i found of the net are hover lists not same as we see on f/b.
Thanks.
Something like this:

It is just a menu that pops up where use can pick an option.
If you were using jQuery it would be something like this plug-in
http://plugins.jquery.com/project/selectbox

I can't find a non JS-solution (and for JS I'm using jQuery to assign focus to an arbitrary element that would keep the sub-menu open (on the plus side, I'm pretty darn sure that Facebook will be using JavaScript, of some sort, to achieve their implementation too).
However, I've put together a couple of examples, these are, much like Facebook, simply dropdown lists, with a JavaScript handler to assign focus to the clicked element (to keep the sub-menu open regardless of mouse position on the page, until the user clicks elsewhere).
With that in mind, I've used the standard css dropdown-style mark-up:
<ul>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
</ul>
With the css:
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
ul li {
display: inline-block;
position: relative;
width: 100px;
border-bottom: 1px solid #ccc;
}
ul li ul {
display: none;
width: 100%;
position: absolute;
top: 1em;
left: 0;
}
ul li a:hover + ul,
ul li a:active + ul,
ul li a:focus + ul {
display: block;
}
ul li ul li {
border: 0 none transparent;
}
And the jQuery:
$(document).ready(
function() {
$('li a').click(
function(){
$(this).focus();
});
}
);
Demo at JS Bin
Notice that I've used a elements, since focus is more easily assigned to anchors than plain, in this case, li elements. However a second version, with the same end result is achieved with the following jQuery:
$(document).ready(
function() {
$('li').click(
function(){
$('li').not(this).removeAttr('tabindex');
$(this).attr('tabindex','-1').focus();
});
}
);
Demo at JS Bin.
Addenda
Stu Nicholls, of CSS Play seems to have achieved a pure-css solution for this (with a gallery), but I haven't worked my way through his CSS to see how he did it.