انجمن کدستانMoisrex

@font-face {

font-family: 'ecoico';

src:url('http://bayangfx.esy.es/demo/ecoico.eot');

src:url('fonts/ecoico.eot?#iefix') format('embedded-opentype'),

url('http://bayangfx.esy.es/demo/ecoico.woff') format('woff'),

url('http://bayangfx.esy.es/demo/ecoico.ttf') format('truetype'),

url('http://bayangfx.esy.es/demo/ecoico.svg#ecoico') format('svg');

font-weight: normal;

font-style: normal;

}

.cbp-vimenu {

position: fixed;

overflow: hidden;

top: 0;

left: 0;

height: 100%;

list-style-type: none;

margin: 0;

padding: 0;

background: #f7f7f7;

}

.cbp-vimenu li a {

display: block;

text-indent: -500em;

height: 5em;

width: 5em;

line-height: 5em;

text-align: center;

color: #999;

position: relative;

border-bottom: 1px solid rgba(0,0,0,0.05);

-webkit-transition: background 0.1s ease-in-out;

-moz-transition: background 0.1s ease-in-out;

transition: background 0.1s ease-in-out;

}

.cbp-vimenu li a:hover,

.cbp-vimenu li:first-child a{

background: #47a3da;

color: #fff;

}

/* class for current item */

.cbp-vimenu li.cbp-vicurrent a {

background: #fff;

color: #47a3da;

}

.cbp-vimenu li a:before {

font-family: 'ecoico';

speak: none;

font-style: normal;

font-weight: normal;

text-indent: 0em;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

font-size: 1.4em;

-webkit-font-smoothing: antialiased;

}

.cbp-vimenu li a.icon-logo:before {

content: "C";

font-weight: 700;

font-size: 300%;

font-family: 'Lato', Calibri, Arial, sans-serif;

}

.icon-search:before {

content: "\e004";

}

.icon-archive:before {

content: "\e005";

}

.icon-download:before {

content: "\e006";

}

.icon-location:before {

content: "\e007";

}

.icon-images:before {

content: "\e009";

}

.icon-pencil:before {

content: "\e008";

}

/* Example for media query (depends on total height of menu) */

@media screen and (max-height: 34.9375em) {

.cbp-vimenu {

font-size: 70%;

}

}

</style>

<ul class="cbp-vimenu">

<li><a href="#" class="icon-logo">Logo</a></li>

<li><a href="#" class="icon-archive">Archive</a></li>

<li><a href="#" class="icon-search">Search</a></li>

<li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>

<li><a href="#" class="icon-location">Location</a></li>

<li><a href="#" class="icon-images">Images</a></li>

<li><a href="#" class="icon-download">Download</a></li>