GithubHelp home page GithubHelp logo

virgildrew / slidernav Goto Github PK

View Code? Open in Web Editor NEW

This project forked from devgrow/slidernav

0.0 0.0 0.0 32 KB

SliderNav is a JQuery plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It is made mainly for alphabetical listings but can be used with anything.

Home Page: http://devgrow.com/slidernav/

CSS 12.45% JavaScript 14.45% HTML 73.10%

slidernav's Introduction

Plugin Name: SliderNav
Author: Monjurul Dolon, http://mdolon.com/
More Information: http://devgrow.com/slidernav

SliderNav is a JQuery plugin that lets you add dynamic, sliding content 
using a vertical navigation bar (index). It is made mainly for 
alphabetical listings but can be used with anything, though longer words 
can look a bit awkward. The plugin automatically adds the navigation and 
sets the height for the object based on how tall the navigation is, in 
order to make sure users have access to the entire list. I also used the 
overflow: auto; property for the actual content so you can use your 
mousewheel to scroll through the content as well.

The first of the configurations is height - set this to a pixel value if 
you wish to override the automatic detection based on the vertical 
navigation (you may need to change the min-height in the CSS too). Also 
by default, the plugin will generate an alphabetical navigation that 
uses all 26 letters of the English alphabet, however you can also use 
custom items using the following code:

    $('#slider').sliderNav({items:['item1','item2','item3'], height:'200'});

You can also set arrows to true (default) or false, which displays 
arrows above and below the slider object to allow scrolling longer 
sections. Click on an arrow will scroll the object by it’s height 
– I used this method to keep code to the minimum, as anything 
smoother/nicer-looking required a lot more code. The last customizable 
option is debug, which can either be true or false. This adds a little 
bit of text on the bottom of the slider that shows how many pixels the 
current offset is (was useful during early development, probably not 
anymore).

slidernav's People

Contributors

mdolon avatar youen1 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.