The website layout is being messed due to Ad Blocker in your Web Browser. Kindly disable the Ad Blocker, so you get the better experience with CodingTuting.Com
How to create a Neon Button? Learn: Give a glowing effect to the button using pure CSS and make it sunshiny.
 |
| Super Bright Neon Button |
Hello, guys welcome to the CodingTuting with Jignesh Panchal. I hope you like our last post in which we created an Automatic Typing Effect using JavaScript. If you haven't visited so, click here.
And today we'll focus on Neon Effect on Button. So, let's get started.
How to Create as Automatic Typing Effect in HTML. We'll display a paragraph that display text like typing.
 |
| Auto Typing Effect | Image by Clker-Free-Vector-Images from Pixabay |
We'll create a simple logic using the Recursion method. Although, it is possible using for loop, conditional block (if), Recursion is the best solution.
Hello and welcome back to the CodingTuting with Jignesh Panchal. I hope you like our last creation on Create Animated Background using Pure CSS. Please visit if you haven't. Let's get started for today's creation.
A function who calls itself is called Recursion and the function that is being called is called a recursive function.
It is a very useful method to solve problem in computer programming. We'll learn more about the Recursion Method in another post.
In this article, we'll create a movable gradient animation that gives a beautiful animation effect.
 |
| CSS Animated Background |
Hello and welcome back friends to the CodingTuting with Jignesh Panchal. I hope you like our last post Lets get started.
Gradients are the combination of multiple colors that display a smooth transition between all selected colors.
And we'll select 3 colors for the background and 4 colors for the heading. All 3 backgrounds move from left to right and right to left which gives a beautiful CSS background effect. The same work has done for the heading.
The bottom area of the Web Page which contains the general information about the website is known as Web Page Footer or Website Footer. This general information is - The Company Name, Web Page Links, Contact information, Copyright info, etc.
 |
| Responsive Footer Design using HTML5 CSS jQuery |
Hello readers, I'm Jignesh and welcome to the CodingTuting. Friends I hope you like our last creation which is Cool Full Responsive Design Template. If you haven't check it yet, so please check it.
And in today's article, we'll learn about the Use of <footer> Tag in HTML5, and also we'll create a Responsive HTML Footer Template using HTML5, CSS and jQuery. So let's get started.
 |
| Create HTML Responsive Template using CSS and jQuery |
I'm sure you've heard this - "If you want to make a Responsive Website, so go with the Bootstrap". Me too friends. I've created many Responsive Websites with the help of Bootstrap. But why I used Bootstrap for responsive design ?
The simple answer is - "Because, I didn't have good knowledge of CSS". One day my in my office my senior gave me an HTML Template and asked me to make it responsive.
Then I started to work and included the Bootstrap files and started to adding Bootstrap Grid and Classes. After finish one page, I show the design to my senior. Immediate he got that - I've used the Bootstrap in this project.
And he asked to remove the Bootstrap and make this Website Responsive without Using Bootstrap. Then I shocked and asked my senior - "Is it possible to make a website responsive without Bootstrap"?
He gave me to answer "Yes" and told me to - "We Can Make Responsive Website with CSS Only too". After that, I took some days to learn about Mobile Responsive Design with CSS. After that, I boost my CSS skills.
And now, I use maximum my own implementation to make Responsive Website Designs.
So this was a short story of mine, and welcome back friends to the CodingTuting. I'm Jignesh Panchal with another awesome tutorial. Friends, I hope you like our last beautiful creation on CSS Scroll Animation. If you haven't seen, please Click here.
Let's move to today's article - Responsive Web Design with HTML5 and CSS3.
I've created full single page Responsive Website Templates. In this, I've used HTML5 structure, CSS3 for responsive and animation and some JS and jQuery for toggle the class. We've the following features in this template.
 |
| Animation on Scroll with CSS and jQuery at CodingTuting |
UI Animations are the key effect on the beauty of any Web Page. Animation on Scroll is one of them. Today we'll learn How to make CSS Animation on Scroll using jQuery.
So, welcome back friends to the CodingTuting. I'm Jignesh Panchal with another awesome tutorial. Friends, I hope you like our last cool creation on Login Form. If you haven't seen, please Click here.
Let's move to today's creation.
I've created 16 different animations. I used CSS3 to created the animation and jQuery to control the animation. Many scroll animations are performed only once, then we need to reload the web page to see the animation again.
But our animation works with every scroll, it doesn't need to reload the web page. We'll create the following kinds of Scroll Animation CSS.
 |
| Beautiful LogIn Form in HTML CSS & JavaScript |
HTML Login Form is one of those creations which beginners create most in learning web design. And the Login Form Design is one of the first looks of Website or Web Application. Like Facebook, Gmail, etc all have a Login Form in the first look.
And, today we'll Create a Login Form with the help of HTML, CSS3, and JavaScript with a Cool Animation. So, welcome to the website CodingTuting with Jignesh Panchal. Friends, I hope you like our last beautiful creation on Count Your Characters.
Let's move ahead to today's creation.
It's so easy to create friends. Just you've good knowledge of HTML, CSS, and JavaScript. I'm not asking about a strong knowledge. But your basic knowledge is important for this kind of creation.
Many Login Forms are available on the internet, but many of them are not responsive. And you know that - I always focus on responsive design. So our this CSS Login Form Template is fully responsive.
Count your character with the help of an easy tool of CodingTuting. And learn How to Create Character Count Tool for our Website.
 |
| Character Count with Space | JavaScript Function Tool |
Sometimes we need to type and submit our content on any website. And many websites have a fixed limit of character. We can't write more than limit. And some websites don't show the number of characters which we type at that time.
So we start to count our character manually while typing, which is so annoying. Today we'll make our own tool fo Character Count with Space. So Welcome Back to the CodingTuting with Jignesh Panchal
Friends I hope you like our last post which was on Pricing Table in CSS with Cool Animation. If you haven't check it - so please check it by Click here. Believe me, it is an awesome creation.
Let's move ahead towards today's creation.
Basically today we are going to learn JavaScript onKeyup and JavaScript onPaste Event. We'll create a function for character count and call that function using onKeyup and onPaste event.
Today we'll create a Beautiful and Responsive Pricing Table in HTML CSS and jQuery.
So Welcome Back friends to the CodingTuting ! I'm Jignesh Panchal, let's go head.
 |
| Responsive Pricing Table Template with Animations |
Pricing Table is a container which contains Key Points, Features, Specifications, Configuration, Price of any service or product, etc.
Pricing Table Design UI helps users/visitors to understand and differenciate among different different products/services. It is a very usefull part of a offer based website.
If we visit any website which offers Products/Services like Godaddy, Hostgator, Avira, etc. They all display their products in a tabular format. This tabular format is a Pricing Table. It contains the Specifications, Key Features, and Price of each product.
And if you are designing or developing any offer based website, then sure you'll need a Pricing Table Design for your project. Many plugins are available for Wordpress users to add Pricing Table in their blog.
But if know to code, so to create a design of Pricing Table UI by self coding is the better option then use of the plugin. We can also create a Pricing Table in Bootstrap. Bootstrap has inbuilt CSS which gives a beautiful look to our design.
But here I'm doing focus on self coding skills. Try to avoid Bootstrap sometime and develop by your own Coding Skills. So today we'll learn - How to Create a Pricing Table using HTML CSS and jQuery.
In today's article, we'll see about a beautiful web design which is known as cards. I've created beautiful 5 different designs of Cards using CSS. These Cards are very easy to design and these are responsive too.
So, today you'll see that How to make Responsive Cards using CSS.
And, welcome to the website CodingTuting.Com with Jignesh Panchal, let's begin!!!
CSS Cards are a perticular layout like a paper, 2D box. It is a specific container which contains some HTML Code, text/information, etc.
The best example of Cards are Business Cards which we see in our real life. These Business Cards contains some information about a person. So we can considor the Business Cards as HTML CSS Cards.
But in Web Design, Cards have many types and purpose. HTML CSS Cards have many use with different different designs and layout.
There are many uses and types of HTML CSS Cards. Use of Cards is depended upon the need and pieces of information. If we want to display only some text or few lines, so we should go with Basic Cards, which contains a snippet of some text and a link.
If we want to add a picture with the snippet, so should use Image Cards. We can make Image Card more beautiful by applying some CSS Animation on the image. We'll see a beautiful CSS Card UI with the image in this tutorial.
 |
| Animated Hamburger Menu Button HTML CSS | CodingTuting |
Today's Web World is of Responsive Web Design. Where we have now is everything responsive. Image, Text, etc all are responsive. And Icons and Buttons also plays an important role in responsive web design.
Because it is not possible to show the content like Desktop in Small Screen Devices (Mobile, Tablet). So we use the Buttons and Menu Icon in HTML for the display that content.
And today we look about Hamburger Menu Button, it is the most important part of Responsive Design.
It is a simple 3 Horizontal Graphic Lines on each other. It is a stack of 3 lines, and looks like burger stack, that's why it is known as Hamburger Menu Button . It is also called Menu Button. See the look of this button in the top image.
The use of Hamburger Menu Button is for expand and collapse the Main Menu, Navbar and other expandable content of the website. We can use Hamburger Menu for Mobile and Desktop as well.
We'll create Hamburger Menu to Cross CSS , Hamburger Menu and Back Button, Hamburger Menu to Sidebar Navigation Menu , etc in this tutorial.
 |
| Navigation Bar Hover Effects CSS | CodingTuting |
Navigations are the first impression of the website. It contains the links to all pages of our website. I've posted and shared the source code about the Responsive and colorful Navbar before. If you haven't check that post, please see here.
Navigations are one of the main parts of the website, that's why HTML5 has given the <nav> tag, which is use to create navigation for website. We can create navbar by using HTML CSS, Bootstrap etc. All these navigations have simple and basic look.
Sometimes we want our navigation more attractive. For this, we use our own CSS. Today we'll do something like this. Today we'll make a Simple Navigation Bar using HTML5 <nav> tag. And we'll make it more attractive by giving a beautiful hover effect using CSS.
We'll give a beautiful touchup to our website by creating this Hover Effect Navbar. We'll use only HTML and CSS, and those creators who haven't knowledge of JavaScript, they will like it more.
Before look at the source code, let's understand How I did this? Don't be hurry for source code.
I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.
Changing the padding of <a> tag from 22px to 6px (on hover), and 6px to 22px (default) is giving the animation effect to the navigation.
Above is the summary for understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.
<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>
<head>
<title>Hover Nabvar</title>
<link rel="stylesheet" href="StyleHoverNavbar.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<nav class="menu">
<a href="#" class="active" title="Home"><i class="fas fa-home"></i> Home </a>
<a href="#" title="About"><i class="far fa-address-card"></i> About </a>
<a href="#" title="Gallery"><i class="fas fa-photo-video"></i> Gallery </a>
<a href="#" title="Contact"><i class="fas fa-mobile-alt"></i> Contact </a>
<a href="#" title="FAQ"><i class="fas fa-question"></i> FAQ </a>
</nav>
</body>
</html>
/*Code by CodingTuting.Com Jignesh Panchal*/
@-webkit-keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@-moz-keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@-o-keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@-webkit-keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
@-moz-keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
@-o-keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
@keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
body{
margin:0;
}
.menu{
text-align: center;
line-height: 3.5;
border-bottom: 4px solid #E91E63;
}
.menu a{
padding: 22px 0px;
margin-right: 40px;
font-family: arial;
font-size: 18px;
text-decoration: none;
color: #282929;
border-bottom: 3px solid #e91e63;
-webkit-animation: down-underline .4s;
-moz-animation: down-underline .4s;
-o-animation: down-underline .4s;
animation: down-underline .4s;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.menu a:hover{
color:#e91e63;
padding: 6px 0px;
-webkit-animation: up-underline .4s;
-moz-animation: up-underline .4s;
-o-animation: up-underline .4s;
animation: up-underline .4s;
}
.menu a.active{
padding: 6px 0;
}
We hope you got - How To Make Navigation Hover CSS. You can use this idea of animation to anywhere as you like. And you can also make more animations like this.
If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.
Social Media Share buttons are an important part of every website. It helps our website viewers and readers to connect with us via many platforms. Generally, websites have social media share buttons on top header and footer.
So people use to scroll up and scroll down to find the social media icons/buttons. This kinds of social media sharing buttons are not much effective, because it is invisible most of the time on the screen. So today we'll see the Fixed Social Media Share Buttons.
These buttons are permanently fixed in the middle of the screen. And it is responsive too. Many newbies web developers and designers look for How To Add Social Media Share Button on the website?
So today you'll get the beautiful solution of How to Add Floating Social Media Buttons to Website. Many bloggers download the plugins to add Social Media Sharing Buttons on their blog/website.
And these plugins make the website heavy and the website takes a long time to load in a web browser. Because most plugins contain HTML, CSS along with JavaScript and jQuery But our Social Media Share Buttons are too light.
These are built-in pure HTML and CSS. You can add these Floating and Fixed Social Media Share Button in your Blogger website, WordPress website, etc. These works with hover effects. These are the few lines of code.
Just add this HTML design and CSS in your website.
Let's understand the source code.
I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.
Above is the summary of understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.
<!DOCTYPE html>
<!-- Code by CodingTuting.Com Jignesh Panchal -->
<html>
<head>
<title>Social Share</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="social-share">
<a href="#" title="Social Share" id="share">
<i class="fas fa-share-alt my-social"></i>
</a>
<a href="#YWhatsapp url" target="_blank" title="Instagram" id="instagram">
<i class="fab fa-instagram my-social"></i>
</a>
<a href="#YReddit url" target="_blank" title="Reddit" id="reddit">
<i class="fab fa-reddit-alien my-social"></i>
</a>
<a href="#YLinkedin url" target="_blank" title="Linkedin" id="linkedin">
<i class="fab fa-linkedin-in my-social"></i>
</a>
<a href="#YWhatsapp url" target="_blank" title="Whatsapp" id="whatsapp">
<i class="fab fa-whatsapp my-social"></i>
</a>
<a href="#Ytwitter url" target="_blank" title="Twitter" id="twitter">
<i class="fab fa-twitter my-social"></i>
</a>
<a href="#Yfacebook url" target="_blank" title="Facebook" id="facebook">
<i class="fab fa-facebook-f my-social"></i>
</a>
</div>
</body>
</html>
/* CSS Code by CodingTuting.Com Jignesh Panchal */
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#social-share {
position: fixed;
right: 0px;
top: 50%;
z-index:10;
}
#social-share a {
text-decoration: none;
float: right;
}
#social-share a:not(:first-child) {
animation:fadeOut 0.5s;
display: none;
}
#social-share:hover a:not(:first-child) {
display: inline;
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
-o-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
#social-share:hover .fa-share-alt {
border-radius: 0px;
}
#social-share a .my-social {
border-right: 0;
}
#social-share a .fa-facebook-f {
padding: 8px 12px;
color: #3F51B5;
border-radius: 3px 0px 0px 3px;
}
#social-share a .fa-twitter {
color:#87ceeb;
}
#social-share a .fa-whatsapp {
color:#008000;
}
#social-share a .fa-linkedin-in {
color:#607d8b;
}
#social-share a .fa-reddit-alien {
color:#ff6c00;
}
#social-share a .fa-instagram {
color:#ff1740;
padding: 8px 11px;
}
#social-share > a > .fa-share-alt {
color: #2196f3;
border-right: 0;
padding: 8px 10px;
border-radius: 3px 0px 0px 3px;
}
#social-share #facebook:focus > .fa-facebook-f, #social-share .fa-facebook-f:hover {
background-color: #3F51B5;
border-color:#3F51B5;
color: #fff;
}
#social-share #twitter:focus > .fa-twitter, #social-share .fa-twitter:hover {
background-color:#87ceeb;
border-color: #87ceeb;
color:#fff;
}
#social-share #whatsapp:focus > .fa-whatsapp, #social-share .fa-whatsapp:hover {
background-color:#008000;
border-collapse: #008000;;
color:#fff;
}
#social-share #linkedin:focus > .fa-linkedin-in, #social-share .fa-linkedin-in:hover {
background-color:#607d8b;
border-collapse: #607d8b;;
color:#fff;
}
#social-share #reddit:focus > .fa-reddit-alien, #social-share .fa-reddit-alien:hover {
background-color:#ff6c00;
border-collapse: #ff6c00;;
color:#fff;
}
#social-share #instagram:focus > .fa-instagram, #social-share .fa-instagram:hover {
background-color:#ff1740;
border-collapse: #ff1740;
color:#fff;
}
#social-share #share:focus > .fa-share-alt, #social-share .fa-share-alt:hover {
color: #fff;
background-color: #2196f3;
border-color: #2196f3;
}
.my-social {
font-size: 1.5em;
border: 1px solid #3F51B5;
padding: 8px 10px;
cursor: pointer;
transition: all 0.4s ease-out;
-webkit-transition: all .4s ease-out;
-moz-o-trasition: all .4s ease-out;
-o-trasition: all .4s ease-out;
}
We hope you got - How to Add Social Media Share Button in Website. If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.
 |
| jQuery stop function CodingTuting Image by Arek Socha from Pixabay |
Sometimes we need to stop any function in jQuery in the middle. So How to stop function in jquery?
In this tutorial, we'll learn - How to use jQuery stop function.
Using jQuery stop() method/function, we can stop the currently running function. The stop() function in jQuery is very useful on the animations. It is used to stop the currently running animation.
We can stop the functions like jQuery fadeIn(), jQuery fadeOut(), jQuery slide() and more. We can resume the stoped animation too. This method is also known as jquery stop and resume animation.
Let's see
Syntax:
$(selector).stop(stopAllAnimations, jumpToEnd);
It is an "optional" boolean (true or false) parameter. It is used to stop all animations which are in the queue. The default value of this parameter is false.
It is an "optional" boolean (true or false) parameter. It is used to complete immediately the currently running animation. The default value of this parameter is false.
We'll understand the use of these parameters in this tutorial.
Start the animation by click on the "Start" button. And stop the animation by clicking the "Stop" button.
Here, stopAllAnimations parameter is set to true.
There are 4 animations here in the queue. left, down, right and top.
All queued animations will stop once we click on the "Stop" button.
Here, jumpToEnd parameter is set to true.
There are 4 animations here in the queue. left, down, right and top.
It'll complete immediately the current animation and move to the next animation, once we click on the "Stop" button.
<style>
.myBox
{
background:#ff0000;
height:100px;
width:100px;
position: relative;
margin-top:20px;
}
</style>
<button id="startAnimation"> Start </button>
<button id="stopAnimation"> Stop </button>
<div class="mybox"></div>
$(document).ready(function(){
$("#startAnimation").click(function(){
$(".mybox").animate({ left: "+=300px" }, 2000 );
$(".mybox").animate({ top: "+=100px" }, 2000 );
$(".mybox").animate({ left: "-=300px" }, 2000 );
$(".mybox").animate({ top: "-=100px" }, 2000 );
});
$("#stopAnimation").click(function(){
$(".mybox").stop(false, true);
});
});
We hope you got - How to stop jQuery Function from execution. If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.
 |
| Responsive Navbar like Bootstrap Navbar using HTML CSS jQuery CodingTuting |
A beautiful Responsive Design Navigation Menu is important for a website. The Navigation Menu Bar is also known as Navbar, Menubar, etc.
A Navbar is a strip which contains the menu/links of other pages. Eg: Home, About, Contact, etc. There are two types of Navbar. 1. Horizontal Navbar, 2. Vertical Navbar. We'll create a Horizontal Navigation Bar.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Beautiful Navbar </title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav nav-sky">
<div class="menu-btn"> <i class="fas fa-bars"></i> </div>
<div class="nav-elements">
<ul class="nav-content">
<li> <a href="#" title="Home" class="active"> <i class="fas fa-home"></i> Home </a> </li>
<li> <a href="#" title="About"> <i class="fas fa-address-card"></i> About </a> </li>
<li>
<div class="dropdown">
<a href="#" class="dropdown-link" title="Gallery">
<i class="fas fa-camera"></i> Gallery <i class="fas fa-caret-down"> </i>
</a>
<div class="dropdown-menu">
<a href="#" title="Option 1"> Opton 1 </a>
<a href="#" title="Option 2"> Opton 2 </a>
<a href="#" title="Option 3"> Opton 3 </a>
</div>
</div>
</li>
<li> <a href="#" title="Contact"> <i class="fas fa-phone"></i> Contact </a> </li>
</ul>
<form class="search-area">
<input type="text" name="search" placeholder="Search Item" title="Search Item">
<button class="btn-search" name="search-button" title="Search">Search</button>
</form>
</div>
</div>
<script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script defer data-src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
</body>
</html>
/* CSS for style layout start*/
.nav {
padding: 0px 50px;
font-family: sans-serif;
}
.nav .menu-btn {
display:none;
}
.nav-content {
padding: 0;
list-style-type: none;
display: inline-block;
margin: 0px;
}
.nav-content li {
display: inline-block;
}
.nav-content li a {
text-decoration:none;
padding: 14px 10px;
display: flex;
}
.nav-content li a .fa-caret-down {
padding: 0px 10px;
}
.dropdown .close-dropdown .fa-times {
padding-right:10px;
float: right;
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
z-index: 1;
min-width: 130px;
display:none;
}
.search-area {
float:right;
list-style-type: none;
display: inline-block;
padding: 8px;
}
.search-area input {
border-radius: 4px;
padding: 6px;
transition: all .5s;
}
.search-area input:focus {
border-radius: 4px;
outline: none;
}
.btn-search {
border-radius: 4px;
padding: 6px;
cursor: pointer;
transition: all .5s;
}
svg:not(:root).svg-inline--fa {
padding-right: 5px;
}
/* CSS for style layout end*/
/* CSS Media Query for 768p start */
@media screen and (max-width: 768px) {
.bottom-border-nav{
border-bottom:0.1px solid;
}
.nav {
padding: 0px;
}
.nav .menu-btn {
display:block;
padding: 10px;
font-size:2rem;
}
.nav-elements {
display:none;
}
.nav-sky .search-area {
border-top: 1px solid #fff;
}
.nav-content {
display: block;
}
.nav-content li {
display: block;
}
.dropdown-menu {
position: relative;
min-width: auto;
}
.dropdown-menu a {
padding-left: 20px !important;
}
.search-area {
float: none;
width: 100%;
padding: 12px 8px;
border-top:0.1px solid;
}
}
/* CSS Media Query for 768p end */
/* CSS for sky theme start*/
.nav-sky {
color:#fff;
background-image: linear-gradient(#44adff, #8acbfd);
}
.nav-sky .nav-content li a {
color:#fff;
}
.nav-sky .nav-content li a:hover, .nav-sky .dropdown:hover .dropdown-link {
background-image: linear-gradient(#1096ff, #5fb8ff);
}
.nav-sky .dropdown-menu {
background-color: #a2d5fd;
box-shadow: 0px 5px 10px #abdaff;
}
.nav-sky .search-area input {
color: #fff;
background: transparent;
border: 1px solid #fff;
}
.nav-sky .search-area input:focus {
box-shadow: 0px 0px 10px #fff;
}
.nav-sky .search-area input::placeholder {
color:#fff;
}
.nav-sky .btn-search {
background: transparent;
border: 1px solid #fff;
color: #fff;
}
.nav-sky .btn-search:hover, .btn-search:focus {
background-color: #0182e6;
border: 1px solid #0182e6;
color: #fff;
}
.nav-sky .active {
background-image: linear-gradient(#1096ff, #5fb8ff);
}
/* CSS for sky theme end*/
<script>
$(document).ready(function(){
$(".menu-btn").click(function(){
$(this).toggleClass("bottom-border");
$(this).next(".nav-elements").slideToggle("slow");
});
});
</script>
 |
| Responsive Navigation Bar Nav Sky HTML CSS jQuery CodingTuting |
 |
| Mobile Friendly Navigation Bar Nav Sky HTML CSS jQuery CodingTuting |
 |
| Responsive Navigation Bar Nav Anger HTML CSS jQuery CodingTuting |
 |
| Responsive Navigation Bar Nav Wet HTML CSS jQuery CodingTuting |
 |
| Responsive Navigation Bar Nav Coal HTML CSS jQuery CodingTuting |
 |
| Responsive Navigation Bar Nav Silver HTML CSS jQuery CodingTuting |
 |
| Responsive Navigation Bar Nav Aqua HTML CSS jQuery CodingTuting |
 |
| Responsive Navigation Bar Nav Sunny HTML CSS jQuery CodingTuting |
 |
| Responsive Navigation Bar Nav Lips HTML CSS jQuery CodingTuting |
jQuery slide effect is used to slide up and slide down the content.
There are 3 kinds of slide effect are in jQuery.
The jQuery effect "slideDown()" is used to slide down the content.
Syntax:
$(selector).slideDown(speed, callback);
slideDown() methods has two optional parameters:-
1. The parameter "speed" is used to change the speed of slide. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the slideDown() method completed. We'll learn about callback in the upcoming chapter.
Example:
This will slide down the text after a click on the button.
Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideDown() method. You'll find more jQuery Tutorials on this site.
Code
<head>
<style>
#slideBox
{
padding: 5px;
text-align: center;
background-color: #3b3e48;
border: solid 1px #c3c3c3;
}
#slideBox
{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="slideDown-btn">Slide Down</button>
<div id="slideBox">
<p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideDown() method. You'll find more jQuery Tutorials on this site.</p>
</div>
</body>
Add this jQuery before closing the </body> tag
<script>
$(document).ready(function(){
$("#slideDown-btn").click(function(){
$("#slideBox").slideDown("slow");
});
});
</script>
The jQuery effect "slideUp()" is used to slide up the content.
Syntax:
$(selector).slideUp(speed, callback);
slideUp() methods has two optional parameters:-
1. The parameter "speed" is used to change the speed of slide up. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the slideUp() method completed. We'll learn about callback in the upcoming chapter.
Example:
This will slide up the text after a click on the button.
Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideUp() method. You'll find more jQuery Tutorials on this site.
Code
<head>
<style>
#slideUpBox
{
padding: 5px;
text-align: center;
background-color: #3b3e48;
border: solid 1px #c3c3c3;
}
#slideUpBox
{
padding: 50px;
}
</style>
</head>
<body>
<button id="slideUp-btn">slide up</button>
<div id="slideUpBox">
<p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideUp() method. You'll find more jQuery Tutorials on this site.</p>
</div>
</body>
Add this jQuery before closing the </body> tag
<script>
$(document).ready(function(){
$("#slideUp-btn").click(function(){
$("#slideUpBox").slideUp("slow");
});
});
</script>
 |
| jQuery slideToggle() Effect | jQuery Tutorial | CodingTuting |
The jQuery effect "slideToggle()" is used to switching in slideUp and the slideDown methods.
Syntax:
$(selector).slideToggle(speed, callback);
slideToggle() methods has two optional parameters:-
1. The parameter "speed" is used to change the speed of toggle effect. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the slideToggle() method completed. We'll learn about callback in the upcoming chapter.
Example:
This will toggle (switch) between slide up and slide down effect on the element after a click on the button.
Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideToggle() method. You'll find more jQuery Tutorials on this site.
Code
<head>
<style>
#slideToggleBox
{
padding: 5px;
text-align: center;
background-color: #3b3e48;
border: solid 1px #c3c3c3;
display:none;
}
#slideToggleBox
{
padding: 50px;
}
</style>
</head>
<body>
<button id="slideToggle-btn">Slide Toggle</button>
<div id="slideToggleBox">
<p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideToggle() method. You'll find more jQuery Tutorials on this site.</p>
</div>
</body>
Add this jQuery before closing the </body> tag
<script>
$(document).ready(function(){
$("#slideToggle-btn").click(function(){
$("#slideToggleBox").slideToggle("slow");
});
});
</script>