Bootstrap snippet: Count Menu (no responsive)

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: bootstrap,snippet,count,menu



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <div class="container bootstrap snippet"> <div class="config block"> <div class="tab-content"> <!-- 1st Block of tab-content --> <div class="tab-pane active" id="home"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-heart-o red"></i></a> <h2>19</h2> <h4 class="br-red">My Love</h4> </div> </div> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-desktop lblue"></i></a> <h2>29</h2> <h4 class="br-lblue">My Desk</h4> </div> </div> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-comment-o green"></i></a> <h2>39</h2> <h4 class="br-green">My Coms</h4> </div> </div> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-flag-o orange"></i></a> <h2>49</h2> <h4 class="br-orange">My Nav</h4> </div> </div> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-envelope-o green"></i></a> <h2>59</h2> <h4 class="br-green">My Mail</h4> </div> </div> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-laptop pink"></i></a> <h2>69</h2> <h4 class="br-pink">My Pc</h4> </div> </div> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-sun-o blue"></i></a> <h2>79</h2> <h4 class="br-blue">My Deal</h4> </div> </div> <div class="col-md-3 col-xs-6"> <div class="config-one-item animated animation fadeInDown"> <a href="#"><i class="fa fa-search red"></i></a> <h2>89</h2> <h4 class="br-red">My View</h4> </div> </div> </div> </div> </div> <div class="tab-pane" id="profile"> <div class="container bootstrap snippet"> <!-- 2nd Block of tab-content --> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="config-two-item"> <h4><a href="#"><i class="fa fa-heart red"></i>Its Me To Do</a></h4> <p>Shows the Configuration of the data to be used. Shows the Configuration. </p> </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-two-item"> <h4><a href="#"><i class="fa fa-desktop red"></i>Long term Course</a></h4> <p>Shows the Configuration of the data to be used. Shows the Configuration.</p> </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-two-item"> <h4><a href="#"><i class="fa fa-comment red"></i>SIT College of University</a></h4> <p>Shows the Configuration of the data to be used. Shows the Configuration.</p> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="config-two-item"> <h4><a href="#"><i class="fa fa-envelope red"></i>Single two or Three</a></h4> <p>Shows the Configuration of the data to be used. Shows the Configuration.</p> </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-two-item"> <h4><a href="#"><i class="fa fa-laptop red"></i>The Fire of Ocean</a></h4> <p>Shows the Configuration of the data to be used. Shows the Configuration.</p> </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-two-item"> <h4><a href="#"><i class="fa fa-sun-o red"></i>Sys Con to be Used</a></h4> <p>Shows the Configuration of the data to be used. Shows the Configuration.</p> </div> </div> </div> </div> </div> <div class="tab-pane text-center" id="messages"> <div class="container bootstrap snippet"> <!-- 3rd Block of tab-content --> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="config-three-item animated"> <img src="img/user-1.jpg" class="img-responsive" alt=""> <h4>Luara</h4> <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp; <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp; <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp; <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp; </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-three-item animated"> <img src="img/user-2.jpg" class="img-responsive" alt=""> <h4>Keran</h4> <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp; <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp; <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp; <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp; </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-three-item animated"> <img src="img/user-3.jpg" class="img-responsive" alt=""> <h4>Mia</h4> <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp; <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp; <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp; <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp; </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="config-three-item animated"> <img src="img/user-4.jpg" class="img-responsive" alt=""> <h4>shilpa</h4> <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp; <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp; <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp; <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp; </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-three-item animated"> <img src="img/user-5.jpg" class="img-responsive" alt=""> <h4>Simsa</h4> <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp; <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp; <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp; <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp; </div> </div> <div class="col-md-4 col-sm-4"> <div class="config-three-item animated"> <img src="img/user-6.jpg" class="img-responsive" alt=""> <h4>Sherin</h4> <a href="#"><i class="fa fa-facebook br-blue"></i></a>&nbsp; <a href="#"><i class="fa fa-twitter br-lblue"></i></a>&nbsp; <a href="#"><i class="fa fa-google-plus br-red"></i></a>&nbsp; <a href="#"><i class="fa fa-skype br-blue"></i></a>&nbsp; </div> </div> </div> </div> </div> </div> </div> </div>
/* Colors */ .white{ color:#fff; } .black{ color:#444; } .grey{ color:#bbb; } .red{ color:#f75353; } .green{ color:#51d466; } .lblue{ color:#32c8de; } .blue{ color:#609cee; } .brown{ color:#c27256; } .pink{ color:#eb76cb; } .orange{ color:#f7a253; } .yellow{ color:#f4e375; } .purple{ color:#cb79e6; } .violet{ color:#9427e1 !important; } .br-white{ background:#fff !important; } .br-black{ background:#444 !important; } .br-grey{ background:#bbb !important; } .br-red{ background:#f75353 !important; } .br-green{ background:#51d466 !important; } .br-lblue{ background:#32c8de !important; } .br-blue{ background:#609cee !important; } .br-brown{ background:#c27256 !important; } .br-pink{ background:#eb76cb !important; } .br-orange{ background:#f7a253 !important; } .br-yellow{ background:#ead54e !important; } .br-purple{ background:#cb79e6 !important; } .br-violet{ background:#9427e1 !important; } .br-dpink{ background:#d33caa !important; } .br-dgreen{ background:#5eb26c !important; } .config ul{ text-align:center; margin-top:40px; margin-bottom:30px; } .config ul li{ margin:10px 20px; display:inline-block; padding:10px 40px 10px 40px; position: relative; border: 1px solid #ccc; height:110px; width:250px; background:#fafafa; border-radius:5px; } .config ul li.active:after, .config ul li.active:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .config ul li.active:after { border-color: rgba(136, 183, 213, 0); border-top-color: #fff; border-width: 15px; margin-left: -15px; } .config ul li.active:before { border-color: rgba(194, 225, 245, 0); border-top-color: #ccc; border-width: 17px; margin-left: -17px; } .config ul li h5{ font-size:18px; } .config ul li p{ line-height:21px; font-size:12px; } .config ul li:hover{ background:#fff; border: 1px solid #ccc; } .config ul li a{ color:#777; text-decoration:none !important; } .config .tab-content .tab-pane{ background:#fff; border:1px solid #ddd; border-radius:8px; padding:20px; } .config .tab-content .config-one-item{ text-align:center; margin-bottom:20px; margin-top:20px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; animation-duration: 1s; animation-delay:0s; -webkit-animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-duration: 1s; -moz-animation-delay:0s; -ms-animation-duration: 1s; -ms-animation-delay: 0s; -o-animation-duration: 1s; -o-animation-delay: 0s; } .config .tab-content .config-one-item i{ font-size:45px; } .config .tab-content .config-one-item h2{ font-size:85px; font-weight:normal; margin-bottom:20px; line-height:60px; } .config .tab-content .config-one-item h4{ display:inline; font-family: 'Open Sans', sans-serif; font-size:12px; font-weight:normal; color:#fff; background:#f75353; padding:5px 10px 5px 10px; border-radius:5px; } .config .tab-pane .config-two-item{ margin-top:15px; margin-bottom:15px; } .config .tab-pane .config-two-item h4{ margin:0px; color:#777; font-size:18px; font-weight:bold; } .config .tab-pane .config-two-item p{ line-height:20px; margin-bottom:10px; max-width:250px; font-size:12px; } .config .tab-pane .config-two-item a{ color:#777; } .config .tab-pane .config-two-item i{ display:inline-block; height:35px; width:25px; border-radius:100px; line-height:30px; font-size:15px; } .config .tab-pane .config-three-item { margin-top:40px; margin-bottom:40px; border:1px solid #ccc; padding:7px 7px 7px 7px; border-radius:5px; max-width:300px; } .config .tab-pane .config-three-item img{ border-radius:2px; } .config .tab-pane .config-three-item h4{ text-align:center; margin-top:10px; font-size:20px; } .config .tab-pane .config-three-item i{ display:inline-block; height:30px; width:30px; line-height:30px; text-align:center; border-radius:100px; color:#fff; font-size:15px; }
Dey-Dey

Count Menu (no responsive)

Dey-Dey
  Nov 4th 2014, 08:59
2.9K Views