Solved

Require floating vertical slider menu on site

Posted on 2014-02-20
4
320 Views
Last Modified: 2014-02-24
I am developing an Asp. Net application and I require a menu to be able to slide out from the left of the page as below:

Verticle menu
In the image above the user has clicked the arrows for the slider to slide out as shown.  Clicking the arrows now will result in the slider "closing" and only a sliver of it shown with the arrows now being displayed as ">>" so the user knows they can expand it again.

The page will be fairly long so I would like the slider to move down as the user scrolls through the page so it is always available.
0
Comment
Question by:canuckconsulting
  • 2
4 Comments
 

Author Comment

by:canuckconsulting
ID: 39875831
I found a pretty good example of the functionality I'm after. On the following page I want something very similar to how the "Sign Up For The Newsletter" slider works:


http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39876417
Spry is not being developed anymore and I would stay away from that.  See the note from Adobe, http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.html.

Here is something I quickly created using jquery animate. http://jsbin.com/vezilasu/1/edit?html,css,js,output

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>Padas </title>
</head>
<body>
<div class="main">
  <div id="menu_button" class="closed">Open</div>
  <p><a href="http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28370433.html#a39875831">http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28370433.html#a39875831</a></p>
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper, justo sit amet scelerisque vulputate, libero augue aliquet velit, eget ultrices magna sapien ut velit. Sed consectetur ante eget felis dictum, eu pellentesque leo pellentesque. Nunc ut tincidunt massa, vel cursus dolor. Fusce faucibus iaculis turpis non aliquam. Sed ullamcorper ultrices diam vitae convallis. Sed tincidunt eleifend hendrerit. Suspendisse scelerisque rhoncus pulvinar.
  </p><p>
In bibendum tempus blandit. Aenean in sem id nisi congue scelerisque nec sed erat. Donec fermentum nisl a eros vehicula, ac fringilla nisl luctus. In faucibus euismod purus eget hendrerit. Vestibulum condimentum est erat, ut laoreet nulla dictum id. Phasellus sit amet pulvinar tellus. Aenean leo enim, volutpat vel vehicula in, condimentum sit amet tortor. Nunc quis nulla erat. Aliquam commodo eget erat ut tristique. Quisque imperdiet scelerisque eros, quis euismod leo ornare in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis fermentum mauris vitae massa vestibulum, pellentesque rutrum nisi gravida. Cras ut lorem congue, elementum ante id, euismod odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sed porta mi. Etiam ullamcorper tincidunt felis eget sollicitudin.
  </p><p>
Nulla mattis nunc condimentum varius interdum. Aenean lorem elit, sagittis nec aliquet in, vehicula sit amet lectus. Donec sodales pellentesque sem id cursus. Nulla dictum hendrerit nibh, non aliquet massa imperdiet vel. Nunc auctor tellus a orci sollicitudin posuere. Ut mi turpis, pretium bibendum augue nec, sagittis convallis libero. Vivamus quis viverra elit, ut congue nisl.
  </p><p>
Nam ut tellus viverra, venenatis lacus scelerisque, euismod libero. In hac habitasse platea dictumst. Donec nec convallis lectus, ut fringilla mi. Vivamus fringilla sodales risus, in ornare quam consequat consectetur. Donec at volutpat risus, non posuere urna. Cras orci lectus, vulputate in leo pulvinar, ullamcorper porttitor leo. Nam luctus, felis vitae adipiscing varius, sem tellus tempor massa, ac porttitor ipsum odio ac augue.
  </p><p>
Curabitur orci risus, porta gravida rutrum nec, luctus ac mauris. Phasellus euismod nulla ligula, vel iaculis mauris placerat id. Etiam egestas venenatis sem, eu laoreet lorem semper ut. Donec varius vehicula malesuada. Ut ac cursus odio. Ut varius ligula quis rutrum vulputate. Ut vehicula nunc eu rhoncus tempus.
  </p>

  
  </div>
  <div id="menu">
    one<br>two<br>three
  </div>
</body>
</html>

Open in new window

#menu_button{
  background-color:rgba(0,0,0,.8);
  color:white;
  padding-top:10px;
  padding-left:3px;
  width:50px;
  height:30px;
  position:fixed;
  left:0px;
  top:100px;
}
#menu_button:hover{
  background-color:red;
  cursor:pointer;
  
}
#menu{
  display:none;
  background-color:black;
  color:white;
  line-height:20px;
  position:fixed;
  left:-150px;
  top:150px;
  width:120px;
  padding:20px;
}

Open in new window

$( document ).ready(function() {
$("#menu_button").click(function () {

    if ($(this).attr('class') === 'closed') {
        $('#menu').show();
        $("#menu").animate({
            "left": "+=150px"
        }, "slow");
        $('#menu_button').removeClass('closed').addClass('open').text('Close');
    } else {
        $("#menu").animate({
            "left": "-=150px"
        }, "slow", function () {
            $("#menu").hide();
        });
        $('#menu_button').removeClass('open').addClass('closed').text('Open');
    }
});
});

Open in new window


Using jquery mobile.  http://www.aldomatic.com/jqm/fb-menu-style/
0
 

Author Closing Comment

by:canuckconsulting
ID: 39882633
Superb...thank you!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now