Web Analytics Made Easy - StatCounter
FoulsCode

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

20 Νοεμβρίου 2017

Animated radial / circular menu




Αντικαταστήστε τα δικά σας URL που οδηγούν στα δικά σας social.



HTML:





<nav class="circular-menu">

  <div class="circle">
    <a href="URL" class="fa fa-home fa-2x"></a>
    <a href="URL" class="fa fa-facebook fa-2x"></a>
    <a href="URL" class="fa fa-twitter fa-2x"></a>
    <a href="URL" class="fa fa-linkedin fa-2x"></a>
    <a href="URL" class="fa fa-github fa-2x"></a>
    <a href="URL" class="fa fa-rss fa-2x"></a>
    <a href="URL" class="fa fa-pinterest fa-2x"></a>
    <a href="URL" class="fa fa-asterisk fa-2x"></a>
  </div>
  
  <a href="URL" class="menu-button fa fa-bars fa-2x"></a>

</nav>

<h1 class="author">FoulsCode.com by <a href="http://creative-punch.net" target="_blank">Creative Punch</h1>

CSS:

/* Demo by http://creative-punch.net */
/* http://foulscode.com */

@import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

body {
  background: #39D;
}

.circular-menu {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  position: relative;
}

.circle {
  width: 250px;
  height: 250px;
  opacity: 0;
  
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open.circle {
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.circle a {
  text-decoration: none;
  color: white;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: center;

}

.circle a:hover {
  color: #eef;
}

.menu-button {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  text-decoration: none;
  text-align: center;
  color: #444;
  border-radius: 50%;
  display: block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  padding: 10px;
  background: #dde;
}

.menu-button:hover {
  background-color: #eef;
}

/* Author stuff */
h1.author {
  text-align:center;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
}

h1.author a {
  color: #348;
  text-decoration:none;
}

h1.author a:hover {
  color: #ddd;



jQuery:

// http://foulscode.com

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i &lt; l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  
  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

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

16 Νοεμβρίου 2017

CSS3/Javascript Pure Dropdown Menu


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

Μπορείτε να αλλάξετε τους συνδέσμους και τους τίτλους του menu και φυσικά να έχετε ανεβάσει τον κώδικα JavaScript στο χώρο και site σας



HTML:

<div class="container">
  <h1 class="title">Dropdown Menu</h1>
  <ul>
    <li class="dropdown">
      <a href="URL" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="URL">Home</a></li>
        <li><a href="URL">About Us</a></li>
        <li><a href="URL">Services</a></li>
        <li><a href="URL">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="URL" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="URL">Home</a></li>
        <li><a href="URL">About Us</a></li>
        <li><a href="URL">Services</a></li>
        <li><a href="URL">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="URL" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="URL">Home</a></li>
        <li><a href="URL">About Us</a></li>
        <li><a href="URL">Services</a></li>
        <li><a href="URL">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS3:

@import "compass/css3";

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(https://fonts.googleapis.com/css?family=Pacifico);

body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}

.text-center {
  text-align: center;
}

*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
/* FOULSCODE.COM */
.container {
width: 350px;
margin: 50px auto;
  
  &amp; &gt; ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }
}

// =============================================================================
// foulscode.com
// =============================================================================

$blue: #2980B9;
$gray: #EEE;

@mixin ul-nostyle {
list-style: none;
padding: 0;
margin: 0;
}

@mixin double-shadow($color) {
@include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset);
}

@mixin hover-style($color) {
&amp;:hover {
background: lighten($color, 3%);
}
}

@mixin animation($content) {
  animation: $content;
  -moz-animation: $content;
  -webkit-animation: $content;
}

@mixin keyframes($name) {
  @keyframes #{$name} { @content; }
  @-moz-keyframes #{$name} { @content; }
  @-webkit-keyframes #{$name} { @content; }
}

// =============================================================================
// Classes
// =============================================================================

.title {
  font-family: 'Pacifico';
  font-weight: norma;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
  color: $blue;
}

.dropdown {
a {
text-decoration: none;
}

[data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: $blue;
@include double-shadow($blue);
@include hover-style($blue);
@include text-shadow(0 -1px 0 rgba(0,0,0,0.3));
padding: 10px;

}
.icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;

&amp;.open {
@include transform(rotate(-180deg));
@include transition(transform .6s);
}
&amp;.close {
@include transform(rotate(0deg));
@include transition(transform .6s);
}

&amp;:before {
content: '\25BC';
}
}

.dropdown-menu {
max-height: 0;
overflow: hidden;
@include ul-nostyle;

li {
padding: 0;

a {
display: block;
color: darken($gray, 50%);
background: $gray;
@include double-shadow($gray);
@include hover-style($gray);
@include text-shadow(0 -1px 0 rgba(255,255,255,0.3));
padding: 10px 10px;
}
}
}

.show, .hide {
@include transform-origin(50%, 0%);
}

.show {
display: block;
max-height: 9999px;
@include transform(scaleY(1));
@include animation(showAnimation .5s ease-in-out);
@include transition(max-height 1s ease-in-out);
}

.hide {
max-height: 0;
@include transform(scaleY(0));
@include animation(hideAnimation .4s ease-out);
@include transition(max-height .6s ease-out);
}
}

@include keyframes(showAnimation) {
0% {
@include transform(scaleY(0.1));
}
40% {
@include transform(scaleY(1.04));
}
60% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.04));
}
100% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.02));
}
100% {
@include transform(scaleY(1));
}
}

@include keyframes(hideAnimation) {
  0% {
  @include transform(scaleY(1));
  }
  60% {
  @include transform(scaleY(0.98));
  }
  80% {
  @include transform(scaleY(1.02));
  }
  100% {
  @include transform(scaleY(0));
  }
}

JAVASCRIPT:

// Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');

button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})

Element.prototype.hasClass = function(className) {
    return this.className &amp;&amp; new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

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

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 ΓΙΑ ΤΟ ΑΓΑΠΗΜΈΝΟ ΣΑΣ ΙΣΤΌΤΟΠΟ

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