Create Great CSS3 Menus for SmartPhones
Σελίδα 1 από 1 • Μοιραστείτε
HTML:
- Κώδικας:
<ul class="menu">
<li><a href="javascript:void(0);">GreekPort.gr</a></li>
<li><a href="javascript:void(0);">Demos</a></li>
<li><a href="javascript:void(0);">iPhone & iPad</a></li>
<li><a href="javascript:void(0);">Labs</a></li>
<li><a href="javascript:void(0);">Enterprise Grade</a></li>
</ul>
<!-- Just some controls. You can add more -->
<ul class="controls">
<li class="call"><a href="javascript:void(0);">✆</a></li>
</ul>
</div>
CSS:
- Κώδικας:
/* Time for CSS! We'll use the Imprima font from google
web fonts */
@import url(http://fonts.googleapis.com/css?family=Imprima);
body {
background: #323232;
font-family: 'Imprima';
font-size: 76%;
}
/* Styling the widget */
#widget {
/* Width is adjustable, you can increase greekport.gr */
width: 200px;
margin: 50px auto;
box-shadow: 0 0 5px #171717;
}
/* heading */
h1 {
background: linear-gradient(#626a75, #545c67);
color: #fff;
padding: 15px;
margin: 0;
border: 1px solid #1e222b;
/* fixing the double border */
border-bottom: 0;
font-family: Verdana;
font-size: 1.5em;
}
/* Lets give "Deck" a different color */
h1 .highlight {
color: #ababab;
}
/* Onto the Menu (Listing) Now! */
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1.2em;
padding: 15px;
background: linear-gradient(#628297, #4f6b81);
border: 1px solid #1e222b;
border-bottom: 0;
/* little box shadow too! */
box-shadow: inset 0px 1px 1px #8b9db3;
}
/* time for some hover effects for the menu links */
.menu a:hover {
background: linear-gradient(#3b3f48, #3c434d);
box-shadow: inset 0px 1px 1px #475059;
}
/*
we'll also show an arrow on hover. we can use
an image for this task, or make a css icon too.
But i am just going to keep it simple and use
a unicode character.
*/
.menu a:hover::after {
content: '❱';
float: right;
color: gray;
}
/* different bg color on the active state
will be nice too! */
.menu a:active {
background: linear-gradient(#2b442d, #2d4630);
}
/*
things have come along nicely!
finally, we have some controls (you can call
them something else), that we'll style.
*/
.controls {
list-style: none;
padding: 0; margin: 0;
border: 1px solid #1e222b;
border-top: 0;
/* we are using display table so that
we can have 1 or 2 or 3 list items that can have
equal width and take up the entire width of the
`ul.controls`*/
display: table;
width: 100%;
}
.controls li {
display: table-cell;
height: 50px;
background: linear-gradient(#303D50 0%, #293542 50%, #1F2935 50%, #182028 100%);
}
.controls .call {
text-align: center;
vertical-align: middle;
}
.controls .call a {
color: #fff;
text-decoration: none;
font-size: 2em;
}
/* The entire thing looks great now!
Finaly, we'll just add some box greekport.gr shadow to the
container. */
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης