22:04
JQUERY:-
Jquery java script ki library file hoti hai 2006 me baynai gyi thiye open source library file hai,ye free of cost hoti hai,
This link :- https://jquery.com/
Download JS
1.testboot test bootstap
1.Slider Simple slider full download responsive
2.Multiple Multiple Slider Download with Responsive
3 custem pager slider best custom pager link
4.slider devlop dharm effect Effect slider devlop
5. both slider use on page slider dono use 1 hi page par
3.Mouse hover Button click hover effect contact form
4.Mouse button hover sidebar click
5.html HTMlSite
6.simple TempSimple Temp
7.slideclick slide click
8.Text Text Effect
9.TypeEffectTypeeffect
10 .typeeffectnewTypeingEffectText
11.click slider Up dowenclick slider up and dowen
12.bestall slider all slider mix
13 finallassssfinal site
10 .typeeffectnewTypeingEffectText
11.click slider Up dowenclick slider up and dowen
12.bestall slider all slider mix
13 finallassssfinal site
Toggale function click
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />body{ font-family: Open Sans;} TOGGLE MENU
<script type="text/jscript">
$(document).ready(function() {
$(".navbarToggle").click(function(){
$(".menunav").slideToggle(300);//TOOGLE
});
});
</script>
SCROLLTOP
$(document).ready(function() {
$(".pageTop").click(function(){
$('html').animate({scrollTop:0},'slow');
});
});
<---------------javascript:void(0) dena hota hai---------->
<footer>
<p class="pageTop"><a href="javascript:void(0)"><img src="img_pagetop.png" alt="pagetop"></a></p>
</footer>
TOGGLE SLIDE LEFT MENU
left side menu right side contain me use karte hai
<script type="text/javascript">
$(document).ready(function() {
var x = $(window).height();
$(".sidemenubtn").click(function(){
$(".headTop").toggleClass("widthSet01");
$(".containSide").toggleClass("widthSet02");
$(".headTop").height(x);
});
$(".ques").click(function() {
$(".ques").toggleClass("quesDown01");
$(".anser").slideToggle(200);
});
});
</script>
/*----------------header scroll top size increase and decrease--------------------*/
<script type="text/javascript">
$(document).on('scroll',function(){
if($(this).scrollTop() >1){
$('.header').addClass('sticky');
}
else{
$('.header').removeClass('sticky');
}
});
</script>
html,body{
padding:0;
margin:0;
width:100%;
}
#wrapp{
width:100%;
height:auto;
padding:0;
margin:0;
overflow:hidden;
min-height:2000px;
}
.header,.sticky{
background: red none repeat scroll 0 0;
position: fixed;
top: 0;
width: 100%;
}
.sticky{
background:blue;
height:70px;
line-height:70px;
}
<!----------------------------CSS---------------------------------------------->
.headTop {
background: red none repeat scroll 0 0;
text-align: center;
width: 0;
float: left;
transition: all 0.3s ease-in-out;
}
.containSide {
background: pink none repeat scroll 0 0;
box-sizing: border-box;
float: left;
padding: 20px 10px;
width: 100%;
position: relative;
transition: all 0.3s ease-in-out;
}
.sidemenubtn {
cursor: pointer;
position: absolute;
top: 30px;
z-index: 999;
left: 30px;
transition: all 0.3s ease-in-out;
}
.widthSet02 {
width: 80%!important;
}
.widthSet01 {
width: 20%!important;
}
.visibleTS {
display: none;
}
.visiblePC {
display: block;
}
.navbarttogle {
}
.togaleBtn {
margin: 0 20px 0 0;
}
.togaleBtn img {
width: 100%;
cursor: pointer;
}
.Spmanu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999999;
}
@media screen and (max-width:959px) {
.visibleTS {
display: block;
}
.visiblePC {
display: none;
}
}
<!-----------------------end CSS---------------------------------------------->
<p class="navbarToggle visibleTS" data-target=".Spmanu"><img src="img/menu.png" alt="toggle"/></p>
<nav class="Spmanu">
<ul>
<li><a href="#">HOME1</a></li>
<li><a href="#">ABOUT2</a></li>
<li><a href="#">SERVICE3</a></li>
<li><a href="#">CONTECT4</a></li>
</ul>
</nav>
<!-----------CSS----------------->
.pageTop {
position: fixed;
right: 20px;
top: 50%;
margin-top: -20px;
z-index: 2;
display: none;
}
.pageTop a {
width: 40px;
height: 40px;
text-align: center;
display: block;
background: #000;
color: #fff;
line-height: 40px;
text-decoration: none;
}
<!-----------scroll.html----------------->
<div class="footer">
<p class="pageTop"><a href="#">↑</a></p>
</div>
<p class="pageTop"><a href="#">↑</a></p>
</div>
<!-----------toggle----------------->
<!-----------menu effect-------->
<div class="hedInner">
<div class="toggleMenu">
<a href="#" class="toogleIn">
<span></span>
<span></span>
<span></span>
</a>
</div>
</div>
/*---------toggle-----------------*/
.hedInner {
background: pink none repeat scroll 0 0;
margin: 0 auto;
padding: 50px 0;
position: relative;
width: 1170px;
}
.toggleMenu {
border: 3px solid red;
border-radius: 50%;
top: 0;
height: 75px;
position: absolute;
left: 0;
width: 75px;
}
.toogleIn {
background-color: green;
border: 5px solid #fff;
border-radius: 50%;
display: block;
height: 64px;
width: 64px;
}
.toogleIn span {
background: #fff none repeat scroll 0 0;
border-radius: 10px;
display: block;
height: 3px;
margin: 24px auto -18px;
transition: all 0.3s ease 0s;
}
.toogleIn span:nth-child(1) {
width: 25%;
}
.toogleIn span:nth-child(2) {
width: 50%;
}
.toogleIn span:nth-child(3) {
width: 25%;
}
.toogleIn:hover span {
width: 75%;
}
.hedInner {
background: pink none repeat scroll 0 0;
margin: 0 auto;
padding: 50px 0;
position: relative;
width: 1170px;
}
.toggleMenu {
border: 3px solid red;
border-radius: 50%;
top: 0;
height: 75px;
position: absolute;
left: 0;
width: 75px;
}
.toogleIn {
background-color: green;
border: 5px solid #fff;
border-radius: 50%;
display: block;
height: 64px;
width: 64px;
}
.toogleIn span {
background: #fff none repeat scroll 0 0;
border-radius: 10px;
display: block;
height: 3px;
margin: 24px auto -18px;
transition: all 0.3s ease 0s;
}
.toogleIn span:nth-child(1) {
width: 25%;
}
.toogleIn span:nth-child(2) {
width: 50%;
}
.toogleIn span:nth-child(3) {
width: 25%;
}
.toogleIn:hover span {
width: 75%;
}
<!-----------boreder effect---------------------------------------->
<div class="borderLine">
<span class="border01"></span>
<span class="border02"></span>
</a>
</div>
/*---------border effect-----------------*/
.borderLine {
background: yellow none repeat scroll 0 0;
margin: 0px auto;
width: 150px;
padding: 10px 0;
overflow: hidden;
}
.border01 {
background-color: red;
border-radius: 10px;
float: left;
height: 5px;
margin-right: 10px;
width: 30px;
display: inline-block;
}
.border02 {
background-color: red;
border-radius: 10px;
float: left;
height: 5px;
display: inline-block;
width: 110px;
}
.borderLine:hover .border01 {
animation: 1.5s linear 0s normal none infinite running move-short;
width: 0;
}
@keyframes move-short {
100% {
margin-right: 0;
width: 140px;
}
}
.borderLine:hover .border02 {
animation: 1.5s linear 0s normal none infinite running move;
width: 110px;
}
@keyframes move {
100% {
width: 0;
}
}
