Bel-Technology: April 2015

How to make Accordion Menu

11:53 PM Bel-technology 0 Comments

Hello everyone, this is our new post to let you know how to create a simple accordion for your website.

Accordion menus or navigation are manually used on the website to manage large content and navigation lists. The following example will show you how to build a simple accordion by using Bootstrap collapsible components.

The following can be made by using only bootstrap css and javascript. Click to see example.

http://mrsinghcafe.com/Effect/Accordian1/

HTML :-

<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<i class="fa fa-plus"></i>Lorem ipsum dolor sit amet

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Aenean eget ligula id nulla

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Duis lobortis purus auctor

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Nulla eget condimentum mauris

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Placerat vel a nulla

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

</div> <div class="row pad-top">

<i class="fa fa-plus"></i>Lorem ipsum dolor sit amet

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Aenean eget ligula id nulla

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Duis lobortis purus auctor

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Nulla eget condimentum mauris

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

<i class="fa fa-plus"></i>Placerat vel a nulla

</a>

</h4>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus sagittis egestas mauris ut vehicula. Cras viverra ac orci ac aliquam.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

Nulla eget condimentum mauris, eget tincidunt est. Quisque in luctus ligula.

Aenean eget ligula id nulla ornare placerat vel a nulla.

Duis lobortis purus auctor eros rhoncus, sed tempor est molestie.

</div>

!-----------------------------------------------Tech Hunters-----------------------------------------------------!

Regards

Team

www.bel-technology.com

Bootstrap All Type Form Elements :-

1:11 AM Bel-technology 0 Comments

Bootstrap All Type Form Elements :-

Contact forms are one of the most common elements found on a web page, and they can be used to gather just about any type of information required from your users. But since Bootstrap is only a front-end framework, we need to introduce added functionality in order for to make the contact form functional. This is helpful to you Try It. J

<Head>

</Head>

HTML :

<label for="exampleInputEmail1">Email address</label>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label class="control-label" for="selectbasic">Select Basic</label>

<option value="1">Option one</option>

<option value="2">Option two</option>

</select>

</div>

<label class="control-label" for="selectbasic">Select Option Group</label>

<option value="volvo">Volvo</option>

</optgroup>

<option value="mercedes">Mercedes</option>

</optgroup>

</select>

</div>

<label class="col-lg-12" style="padding:0px;" for="submitQuery">Submit Query ( Do Double Click )</label>

</datalist>

</div>

</div>

<label for="submitQuery">Submit Range</label>

</div>

<label>Display a meter gauge:</label>

</div>

<label>Progress</label>

</div>

<label>Progress 2</label>

<span class="sr-only">60% Complete</span>

</div>

</div>

<label for="exampleInputFile">File input</label>

<p class="help-block"> Example block-level help text here. </p>

</div>

<label>

Check me out</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</fieldset>

</div>

Username: <input type="text" name="usr_name">

Encryption: <keygen name="security">

</form>

</div></form>

</div>

CSS:

/*Form CSS*/

form {

border: 1px solid #ccc;

margin: 10px 0;

padding: 17px 40px;

}

.btn.submitQuery {

float: right;

}

.form-control.Query {

width: 89%;

float:left;

}

keygen{ width:100%;}

Show Demo :

http://mrsinghcafe.com/Effect/Form/index.html

!-------------------------------------------------------Huntertech-----------------------------------!

Thanks
Team
www.bel-technology.com

Newer Posts

Older Posts

Bel-Technology

Translate

About Us

Click here to know what we do

Popular Posts

Labels

Pages

How to make Accordion Menu

Bootstrap All Type Form Elements :-

Advertisement

Join the Tech Hunters

recent posts

Our Logo

Like us on Facebook

Blog Archive