?
Solved

Require floating vertical slider menu on site

Posted on 2014-02-20
4
Medium Priority
?
331 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
3 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

839 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