Vertical Clean Menu
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Τετ Αυγ 30, 2017 12:48 am
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]
HTML:
CSS:
JAVASCRIPT:
HTML:
- Κώδικας:
<body>
<h1>Vertical Menu</h1>
<ul class="form">
<li><a class="profile" href="#"><i class="icon-user"></i>GreekPort</a> <li><a class="profile" href="#"><i class="icon-user"></i>Edit Profile</a>
</li>
<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
<li><a class="settings" href="#"><i class="icon-cog"></i>App Settings</a></li>
<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
</ul>
<p><a href="http://www.ourtuts.com/simple-vertical-menu-with-jquery-and-css3/">Check out the Tutorial!</a></p>
</body>
</html>
CSS:
- Κώδικας:
body {
background:url(http://www.ourtuts.com/tutorials/vertical-menu/bg.jpg) scroll center center;
margin:0;
padding:0;
font-family:Quicksand;
font-weight:700;
}
ul.form {
position:relative;
background:#fff;
width:250px;
margin:auto;
padding:0;
list-style: none;
overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}
.form li a {
width:225px;
padding-left:20px;
height:50px;
line-height:50px;
display:block;
overflow:hidden;
position:relative;
text-decoration:none;
text-transform:uppercase;
font-size:14px;
color:#686868;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.form li a:hover {
background:#efefef;
}
.form li a.profile {
border-left:5px solid #008747;
}
.form li a.messages {
border-left:5px solid #fecf54;
}
.form li a.settings {
border-left:5px solid #cf2130;
}
.form li a.logout {
border-left:5px solid #dde2d5;
}
.form li:first-child a:hover, .form li:first-child a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.form li:last-child a:hover, .form li:last-child a {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.form li a:hover i {
color:#ea4f35;
}
.form i {
margin-right:15px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.form em {
font-size: 10px;
background: #ea4f35;
padding: 3px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-style: normal;
color: #fff;
margin-top: 17px;
margin-right: 15px;
line-height: 10px;
height: 10px;
float:right;
}
.form li.selected a {
background:#efefef;
}
h1 {
color:#fff;
margin:0 auto;
margin-top:60px;
margin-bottom:40px;
font-size:30px;
width:300px;
text-align:center;
}
p {
text-align:center;
position:absolute;
width:100%;
bottom:0;
font-size:12px;
font-family:Arial, Helvetica;
color:#fff;
text-transform:uppercase;
}
p a {
color:#fff;
text-decoration:none;
}
JAVASCRIPT:
- Κώδικας:
$(document).ready(function() {
$('ul.form li a').click(
function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$(this).closest('ul').find('.selected').removeClass('selected');
$(this).parent().addClass('selecte
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
