Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

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

Show/Hide Menu with CSS

<style>
  /* wwwfoulscode.com */
  @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}

.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#fbfbfb;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s …

Animated popup menu

Χρονια πολλά καλή χρονια να έχουμε όλοι μας και όλος ο κόσμος!

Ένα καταπληκτικό menu γραμμένο με html και css.
Σας ντίνο τον παρακάτω κώδικα η αλλαγές είναι δικέ σας, υπάρχει live demo στο τέλος του θέματος!

<style>
  /* www.foulscode.com */
  * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }

body {
    font-family:Tahoma, sans-serif;
    font-size: 12px;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#menu ul {
    position: relative;
    top: 20%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
  …

How to Add Neat CSS3 Dropdown Menu in Blogger

Για να εφαρμόσετε το menu στο blog σας αντιγράφουμε τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.gr */
#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientTy…

Another HTML5, CSS3 Navigation Menu

Αντιγραφή επικόλληση τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.gr */
#org_menu {
    position: relative;
    margin: 0 auto;
    clear: both;
    width: 960px;
    }
#org_menu:before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -9px;
    z-index: 1;
    border: 10px solid transparent;
    border-right-color: #c50;
}
#org_menu ul {
    display: block;
    position: relative;
    z-index: 2;
    padding: .2em 30px;
    margin-right: -2em;
    list-style: none;
    background: #f72;
    font-family: 'Arial', serif;
    font-weight:bold;
    font-size: 16px;
    line-height: 1;
    color: white;
    text-transform: capitalize;
    border-radius: 0 9999px 9999px 0;
    box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
                0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}
#org_menu ul:after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
}
    #org_menu li {
        float: left;
  …

Mobile Menu

Αντιγραφή τον παρακάτω κώδικα:

<style>
/* www.foulscode.com */
-
nav[role="navigation"] a {font-size:2em; color: #fff; text-decoration: none; padding: 0 15px; line-height: 35px;}
nav[role="navigation"] li {width: 100%; height: auto; text-align: center; background: #bdc3c7; border: 1px solid #fff;padding: 10px 0;}
nav[role="navigation"] span {font-size: 35px;}
.menu {display: none;}

nav.second {
  width: 320px;
  background: #2980b9;
  height: 40px;
  display: block;
  margin: auto;
  font-family: 'Lato', sans-serif;
}

select {
   background: #2980b9;
   border: none;
   width: 100%;
   font-size: 30px;
   color: #fff;
}

@media only screen
and (max-width : 320px) {
body {background: #000;}
}
.clearfix {clear:both;}
.block {width: 100%; height: 300px; display: block;}
/* www.foulscode.com */
</style>

<br class="clearfix" />
<div class="block"></div>
<nav class="second">
  <form>
<select>
<option value=…

Ένα μενού από τον Francis Ryan Ferolino

Αντιγραφή τον παρακάτω κώδικα:

 <style>
/* foulscode.com */
body{
  margin: 0px;
  padding: 0px;
  background: #000;
  font-family: 'Lato', sans-serif;
}

nav{
  float: none;
  clear: both;
  width: 30%;
  margin: 10% auto;
  background: #eee;
}

nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

nav li{
    float: none;
  width: 100%;
}

nav li a{
  display: block;
  width: 100%;
  padding: 20px;
  border-left: 5px solid;
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: #444;
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;
}

nav li a:hover{ border-bottom: 0px; color: #fff;}
nav li:first-child a{ border-left: 10px solid #3498db; }
nav li:nth-child(2) a{ border-left: 10px solid #ffd071; }
nav li:nth-child(3) a{ border-left: 10px solid #f0776c; }
nav li:last-child a{ border-left: 10px solid #1abc9c; }

nav li a:after {
  content: "";
  height: 100%;
  left: 0;
  top: 0;
  width: 0px; 
  position: absolute;
  transition: a…

Drop-down menu (limited)

Αντιγραφή τον παρακάτω κώδικα:



<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

#wrapper {
  margin: 10px;
}

/* foulscode.com */
.menu,
.sub-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  background-color: #3E454D;
  cursor: pointer;
  position: relative;
  transition: background-color .5s;
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  -webkit-transition: background-color .5s;
  /* IE lt 10, Chrome lt 1, Opera lt 11.6, Safari lt 3, FF lt 4, Android lt 2.1 и iOS lt 2.0 не поддерэивают transition. */
}

.menu li:hover {
  background-color: #353B41 !important; /* .menu > li.home может иметь больше приоритета. Поэтому. */
}

.menu a {
  color: #FFF;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  height: 100%;
  margin: 0 5px;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  word-wrap: break-word;
}

.menu a:hove…

Another Simple CSS3 Dropdown Menu

Αντιγραφή τον παρακάτω κώδικα:


<style>
/* foulscode.blogspot.com */
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  font-size: 13px;
  text-align: center;
  background: #2196F3;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #00BCD4;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
}
ul li:hover {
  background: #4DD0E1;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webki…

CSS Rolling Menu

Ένα όμορφο menu για το blog και το site σας!
Αντιγραφή τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.com */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/Zd2E9abXLFGSr9G3YK2MsFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
}


html{ height:100%; font-family: 'Roboto Condensed'; }
body{ min-height:100%;  background-image: -webkit-radial-gradient(top, circle cover, #252233 0%, #252233 80%);
 background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); }

*{ margin:0; padding:0; }

body{ text-align:center; padding:20px 0; }

    h1{ font-size:1.8em; color:#fff; margin-bottom:50px; letter-s…

Transparent Menu Bar

Άλλο ένα εξαιρετικά όμορφο μενού για το blog και site σας!


<style>
/* http://foulscode.blogspot.gr */
@import url(www.foulscode.blogspot.gr);
html, body {
  height: 100%;
}
body {
  background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
}
nav {
  max-width: 960px;
  /* The mask-image gives us some extra fading. It is not necessary but without this, you can't face out the box-shadows. This clips our menu */
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  /* Using padding instead of margin for the top and bottom here will keep our box-shadow visible and not affected by the mask-image */
  padding: 75px 0;
}
nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px …

Menu Tabs

<style>
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul { overflow:hidden; float:left; padding-left:48px;}
#tabbed {
width:80%;
min-width:400px;
margin:0 auto;
padding-top:68px;
border-bottom:4px solid #8fa11d;
overflow:hidden;
}
li {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #6a7a0f;
border-radius:8px 8px 0 0;
margin-right:46px;
z-index:2;
position:relative;
cursor:pointer;
color:#cfd08b;
text-transform:uppercase;
font:bold 12px/20px Arial, Helvetica, sans-serif;
text-shadow:rgba(0,0,0,.16) -1px -1px;
}
li:before, li:after {
display:block; content:" "; position:absolute;  top:0; height:100%; width:44px; background-color: #6a7a0f;
}
li:before {
right:-24px;
transform: skew(30deg, 0deg) ;
-webkit-transform: skew(30deg, 0deg) ;
-moz-transform: skew(30deg, 0deg) ;
-o-transform: skew(30deg, 0deg) ;
-ms-transform: skew(30deg, 0deg) ;
border-radius:0 8px 0 0;
box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
}
li:after {
left:-24px;
transform: skew(-30deg…

Another Simple CSS3 Dropdown Menu

Ένα πολύ όμορφο μενού δείτε το Demo


<style>
/* www.foulscode.blogspot.gr */
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #ECF0F1;
}
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #2C3E50;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
}
ul li:hover {
  background: #1abc9c;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-tr…

Menu Hover Effect

Αντιγραφή τον παρακάτω κώδικα:


<style>
//@import url(http://foulscode.blogspot.gr);
@mixin va ($pos: relative, $top: 50%) {
position: $pos;
top: $top;
transform: translateY(-50%);
}
html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  background-color: #dc143c;
  font: normal 125%/1.5 "Avenir Next", "Source Sans Pro";
  color: rgba(#fff,1);
  text-shadow: 0 1px 1px rgba(#000,.2);
}
.nav {
  text-align: center;
  /* background-color: gold; */
  @include va;

}
.nav ul {
  display: inline-block;
  transform: translate3d(0, 0, 0);
}
.nav li {
  /* float: left; */
  display: inline-block;
}
.nav a {
  position: relative;
  display: block;
  padding: 0 40px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: #fff;
}
.nav a:after {
  position: absolute;

  // This makes the 'border-width' 0, by moving its left and right side
  // to the middle. This way the animation
  // starts from the center (anchor-point) and expands ou…

CSS Spotlight Menu

Tο εφέ μετάβασης λειτουργεί σε browsers που υποστηρίζουν CSS3 μεταβάσεις, δηλαδή, FF3.5 +, Safari 3.1 +, Google Chrome, Opera και 11.6 +.


Αντιγραφή τον παρακάτω κώδικα:


<style type="text/css">
/* foulscode.blogspot.gr */
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}

.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3…