• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 335
  • Last Modified:

Require floating vertical slider menu on site

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
canuckconsulting
Asked:
canuckconsulting
  • 2
1 Solution
 
canuckconsultingAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
canuckconsultingAuthor Commented:
Superb...thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now