Web Analytics Made Easy - StatCounter
FoulsCode

Εμφάνιση αναρτήσεων με ετικέτα CSS. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα CSS. Εμφάνιση όλων των αναρτήσεων

16 Νοεμβρίου 2017

Menu Toggle button with flat menu


Ένα αρκετά όμορφο menu για site.
Εξοικονομεί πολύ χορό και είναι πολύ εύχρηστο από όλες της συσκευές.

Μπορείτε να αλλάξετε τους συνδέσμους και τους τίτλους στο menu

Εμφάνιση αναρτήσεων με ετικέτα Menu. Εμφάνιση όλων των αναρτήσεων

HTML:


<a href="#menu" id="toggle"><span></span></a>

<div id="menu">
  <ul>
    <li><a href="URL">Home</a></li>
    <li><a href="URL">About</a></li>
    <li><a href="URL">Contact</a></li>
  </ul>
</div>


CSS:

/* Important styles */
/* FoulsCode.com */
#toggle {
  display: block;
  width: 28px;
  height: 30px;
  margin: 30px auto 10px;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 5px;
  background-color: #888;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}

/* menu appearance*/
#menu {
  position: relative;
  color: #999;
  width: 200px;
  padding: 10px;
  margin: auto;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  text-align: center;
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  /* just for this demo */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s;
}
#menu:after {
  position: absolute;
  top: -15px;
  left: 95px;
  content: "";
  display: block;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid white;
}
ul, li, li a {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}
li a {
  padding: 5px;
  color: #888;
  text-decoration: none;
  transition: all .2s;
}
li a:hover,
li a:focus {
  background: #1ABC9C;
  color: #fff;
}

/* FoulsCode.com */
/* demo styles */
body { margin-top: 3em; background: #eee; color: #555; font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif; }
p, p a { font-size: 12px;text-align: center; color: #888; }

JQUERY:


var theToggle = document.getElementById('toggle');

// based on Todd Motto functions
// https://toddmotto.com/labs/reusable-js/

// hasClass
function hasClass(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// addClass
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
    elem.className += ' ' + className;
    }
}
// removeClass
function removeClass(elem, className) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') &gt;= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
// toggleClass
function toggleClass(elem, className) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") &gt;= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

theToggle.onclick = function() {
   toggleClass(this, 'on');
   return false;
}


Εμφάνιση αναρτήσεων με ετικέτα Menu. Εμφάνιση όλων των αναρτήσεων
Διαβάστε Περισσότερα »

14 Νοεμβρίου 2017

Hamburger Menu - HTML, CSS & jQuery



Ένα αναδιπλωμένο menu που εξοικονομεί αρκετό χόρo στο site σας!

Ο κώδικας ακόλουθη παρακάτω εφόσον πρώτα κάνετε την σχετικές αλλαγές προσαρμογής!

Live Demo




HTML:

<header>
<span>Author : <a href="http://foulscode.com" target="_blank">Glenn Smith | FoulsCode.com</a></span>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
</header>

<div class="menu">
  <ul>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
    <a href="URL"><li>LINK</li></a>
  </ul>
</div>

CSS:
/* foulscode.blogspot.gr */
body{
  font-family: 'Noto Sans', sans-serif;
margin:0;
width:100%;
height:100vh;
  background:#ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header{
width:100%; 
background:#ffffff; 
height:60px; 
line-height:60px;
border-bottom:1px solid #dddddd;
}
.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
header{display:inline-block; font-size:12px;}
span{padding-left:20px;}
a{color:#336699;}
/* foulscode.blogspot.gr */ jQuery:

$( document ).ready(function() {

$( ".cross" ).hide();
$( ".menu" ).hide();
$( ".hamburger" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});

});
Διαβάστε Περισσότερα »

Simple Pure CSS Drop Down Menu



Ένα μενού πολύ απλό αλλα ταυτοχρόνως και πολύ κόμσο.

Οι κώδικες του είναι γραμμένη σε html, css, αυτό σημαίνει ακόμα πιο εύκολη η προσαρμογή του.

Code: 


<style>
#primary_nav_wrap
{
margin-top:15px
}

#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
/* foulscode.com */
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}

#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}

#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

#primary_nav_wrap ul ul li
{
float:none;
width:200px
}

#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}

#primary_nav_wrap ul li:hover > ul
{
display:block
}
</style>
<h1>Simple Pure CSS Drop Down Menu FoulsCode.com</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="URL">Home</a></li>
  <li><a href="URL">Menu 1</a>
    <ul>
      <li><a href="URL">Sub Menu 1</a></li>
      <li><a href="URL">Sub Menu 2</a></li>
      <li><a href="URL">Sub Menu 3</a></li>
      <li><a href="URL">Sub Menu 4</a>
        <ul>
          <li><a href="URL">Deep Menu 1</a>
            <ul>
              <li><a href="URL">Sub Deep 1</a></li>
              <li><a href="URL">Sub Deep 2</a></li>
              <li><a href="URL">Sub Deep 3</a></li>
                <li><a href="URL">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="URL">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="URL">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 2</a>
    <ul>
      <li><a href="URL">Sub Menu 1</a></li>
      <li><a href="URL">Sub Menu 2</a></li>
      <li><a href="URL">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 3</a>
    <ul>
      <li class="dir"><a href="URL">Sub Menu 1</a></li>
      <li class="dir"><a href="URL">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="URL">Category 1</a></li>
          <li><a href="URL">Category 2</a></li>
          <li><a href="URL">Category 3</a></li>
          <li><a href="URL">Category 4</a></li>
          <li><a href="URL">FoulsCode.com</a></li>
        </ul>
      </li>
      <li><a href="URL">Sub Menu 3</a></li>
      <li><a href="URL">Sub Menu 4</a></li>
      <li><a href="URL">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 4</a></li>
  <li><a href="URL">Menu 5</a></li>
  <li><a href="URL">Menu 6</a></li>
  <li><a href="URL">Contact Us</a></li>
</ul>
</nav>



Αφού κάνετε αντιγραφή επικόλληση θα πρέπει να προσαρμόσετε εσείς της κατηγοριες που θέλετε.

Αλλάζοντας το κείμενο που θα εμφανίζεται και τον σύνδεσμο που θα ακόλουθη ο επισκέπτης!

Είστε έτοιμη για να κάνετε save!

ΘΑ ΑΚΟΥΛΟΥΘΉΣΟΥΝ ΝΑ ΑΝΕΒΑΊΝΟΥΝ ΚΑΙ ΑΛΛΑ MENU ΓΙΑ ΤΟ ΑΓΑΠΗΜΈΝΟ ΣΑΣ ΙΣΤΌΤΟΠΟ

Διαβάστε Περισσότερα »

bootstrap dropdown hover menu



Είναι ένα menu που περιέχει html, css, java script και κάτι που το διακρίνει από πολλά αλλα είναι πως στην δεξιά μεριά έχεις ένα μενού dropdown το οποιο ανοίγει όταν τα βελάκι παραμείνει πάρο στην κατηγορια!

μπορείτε να βάλετε τα δικά σας στοιχεια και μετά να κάνετε save!

Μείνετε συντονισμένη.

Κατά την συνεχεια θα ανεβαίνουν συνεχεια διαφορα  για όλα τα site, forum, blog!!

HTML:


<div class="body-wrap">
  <div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">FoulsCode.com</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
</div>

CSS:

/* bootstrap dropdown hover menu*/
/* foulscode.com dropdown hover menu*/

body {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4f5d6e;
  position: relative;
  background: rgb(26, 49, 95);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
}

.body-wrap {
  min-height: 700px;
}

.body-wrap {
  position: relative;
  z-index: 0;
}
/* foulscode.com dropdown hover menu*/ .body-wrap:before,
.body-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 260px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
  background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}

.body-wrap:after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}

nav {
  margin-top: 60px;
  box-shadow: 5px 4px 5px #000;
}

JS:

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Διαβάστε Περισσότερα »

22 Ιουνίου 2017

Responsive and Mega menu





HTML:

<!--Google -Fonts-->
<link href='https://fonts.googleapis.com/css?family=Sintony:400,700&subset=latin-ext' rel='stylesheet' type='text/css'>

<!--Font-awsome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<header>
<h2>Responsive Menu</h2>
</header>

<div class="xs-menu-cont">
<a id="menutoggle"><i class="fa fa-align-justify"></i> </a>
<nav class="xs-menu displaynone">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>

</ul>
</nav>
</div>
<nav class="menu">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li class="drop-down">
<a href="#">Products</a>
 
<div class="mega-menu fadeIn animated">
<div class="mm-6column">
<span class="left-images">
<img  src="https://4.bp.blogspot.com/-faF-AemPFUM/U4ryP7pQRsI/AAAAAAAAEvA/fZ-hskCSln4/s1600/Magento%2Bthemes.jpg">
<p>Most Popular Styles </p>
</span>
<span class="categories-list">
<ul>
<span>Computer</span>
<li>Desktops</li>
<li>Laptops</li>
<li>Tablets</li>
<li>Monitors</li>
<li>Networking Printers</li>
<li>Scanners</li>
<li>Jumpers & Cardigans</li>
<li><a class="mm-view-more" href="#">View more →</a></li>
</ul>
</span>

</div>
<div class="mm-3column">
<span class="categories-list">
<ul>
<span>TV & Video</span>
<li>LED TVs
<li>Plasma TVs
<li>3D TVs
<li>DVD & Blu-ray Players
<li>Home Theater Systems
<li>Cell Phones
<li>Apple iPhone
<li><a class="mm-view-more" href="#">View more →</a></li>
</ul>
</span>
</div>
<div class="mm-3column">
<span class="categories-list">
<ul>
<span>Car Electronics</span>
<li>GPS & Navigation</li>
<li>In-Dash Stereos</li>
<li>Speakers</li>
<li>Subwoofers</li>
<li>Amplifiers</li>
   <li>MP3 Players</li>
<li>iPods</li>
  <li><a class="mm-view-more" href="#">View more →</a></li>
</ul>
</span>
</div>
</div>
 
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Blog</a>

</li>
<li>
<a target="_blank" href="http://www.foulscode.com/">Contact</a>
</li>
         <li style="float:right;">
           <a href="http://www.foulscode/">Go my Blog</a>
          </li>

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

Αφού βάλετε τα στοιχεια σας στον κώδικα html είστε τιμή για πιο προχωρημένους να το προσαρμόσουν στα μετρα και στα χρώματα που θέλουν.


CSS:


body {
font-family: 'Sintony', sans-serif;
color: #e5e5e5;
font-size: 12px;
background: #bfbfbf;
line-height: 1;
}
*, *:before, *:after {
    box-sizing: border-box;
}
/** * Eric Meyer's Reset CSS v2.0 (https://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header h2 {
margin: 25px 10px;
font-size: 28px;
text-align: center;
color: cornsilk;
}
.container {
margin: 10px auto;
display: table;
max-width: 1140px;
width: 100%;
}
.container:after, .container:before {
content: "" clear : both;
}
nav.menu {
background: coral;
position: relative;
min-height: 45px;
height: 100%;
}

.menu > ul > li {
list-style: none;
display: inline-block;
color: #fff;
line-height: 45px;

}
.menu > ul li a, .xs-menu li a {
text-decoration: none;
color: #fff;
display:block;
padding: 0px 24px;
}
.menu > ul li a:hover {
background:#444;
color: #fff;
transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
}
.active{
background:#444 !important;

}
.displaynone{
display: none;
}
.xs-menu-cont{
display:none;
}
.xs-menu-cont > a {
    background: none repeat scroll 0 0 #ff7f50;
    border-radius: 3px;
    padding: 3px 6px;
display: block;
border-bottom:1px solid #E67248;
   box-shadow: 0 1px 2px #e67248;
-webkit-box-shadow: 0 1px 2px #e67248;
-moz-box-shadow: 0 1px 2px #e67248;
}
.xs-menu-cont > a:hover{
 cursor: pointer;
}
  
.xs-menu li {
color: #fff;
padding: 14px 30px;
border-bottom: 1px solid #ccc;
background: #FF7F50;

}
.xs-menu  a{
text-decoration:none;
}

.mega-menu {
   background: none repeat scroll 0 0 #888;
    left: 0;
    margin-top: 3px;
    position: absolute;
    width: 100%;
padding:15px;
display:none;
transition-duration: 0.9s;
    
}
#menutoggle i {
    color: #fff;
    font-size: 33px;
    margin: 0;
    padding: 0;
}


/*--column--*/
.mm-6column:after, .mm-6column:before, .mm-3column:after, .mm-3column:before{
content:"";
display:table;
clear:both;


}
.mm-6column, .mm-3column {
 float: left;
 position: relative;
 }
.mm-6column {
    width: 50%;
}
.mm-3column {
        width: 25%;
}
.responsive-img {
    display: block;
    max-width: 100%;

}
.left-images{
margin-right:25px;
}
 .left-images, .left-categories-list {
   float: left;
}
.categories-list li {
    display: block;
    line-height: normal;
    margin: 0;
    padding: 5px 0;
}
.categories-list li :hover{
background:inherit !important;
}
.left-images > p {
    background: none repeat scroll 0 0 #ff7f50;
    display: block;
    font-size: 18px;
    line-height: normal;
    margin: 0;
    padding: 5px 14px;
}
.categories-list span {
    font-size: 18px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
.mm-view-more{
background: none repeat scroll 0 0 #ff7f50;
    color: #fff;
    display: inline !important;
    line-height: normal;
    padding: 5px 8px !important;
margin-top:10px;
}
.display-on{
display:block;
 transition-duration: 0.9s;
}
.drop-down > a:after{
content:"\f103";
color:#fff;
font-family: FontAwesome;
font-style: normal;
margin-left: 5px;


}
 /*MediaQuerys*/
 @media (max-width: 600px) {
.menu {
 display:none;
 }
 .xs-menu li a {

padding:0px;
}
 .xs-menu-cont{
 display:block ;
 }
 }


/*Animation--*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


JS:

$(document).ready(function() {
  //responsive menu toggle
  $("#menutoggle").click(function() {
    $(".xs-menu").toggleClass("displaynone");
  });
  //add active class on menu
  $("ul li").click(function(e) {
    e.preventDefault();
    $("li").removeClass("active");
    $(this).addCss("active");
  });
  //drop down menu
  $(".drop-down").hover(function() {
    $(".mega-menu").addClass("display-on");
  });
  $(".drop-down").mouseleave(function() {
    $(".mega-menu").removeClass("display-on");
  });
});




Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...