sidebar, menu

zeleski · 30/1/13

sidebar help me
http://hutek.info/

mickey · 30/1/13

dụ gì rứa .. pr á

phamhuudu · 30/1/13

Hắn muốn làm cái sidebar giống Hutek đó mà!

@Zeleski: you can contact to Hung Vu for this tutorial

mickey · 30/1/13

trời nói rõ ra chứ vào topic đưa cái hình với cái link .. biết gì mà lần

nhoveai · 30/1/13

mickey said: ↑

trời nói rõ ra chứ vào topic đưa cái hình với cái link .. biết gì mà lần
Click to expand...

bí có nói help-me mà

zeleski · 30/1/13

Dyn · 30/1/13

Mình ngu tiếng anh nên không dám cmt

mickey · 30/1/13

nhoveai said: ↑

bí có nói help-me mà
Click to expand...

đúng là mình ngu tiếng anh ..

Fox Of Dark · 30/1/13

Open Widget Framework, add Widget
HTML Without warper
Info

Mã:

<style>
.quick {
background:url(rgba.php?r=255&g=255&b=255&a=25); background:rgba(255,255,255,0.1); _filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19FFFFFF,endColorstr=#19FFFFFF);
border-top: 1px solid rgb(255,255,255); border-top: 1px solid rgba(255,255,255, 0.1); _border-top: 1px solid rgb(255,255,255);
margin:0 -10px -15px;
padding:9px 20px 0;
}
 
.quick .title:before{
content:">";
height:24px;
width:24px;
margin-right:15px;
display:inline-block;
font-size:.7em;
text-align:center;
line-height:1.7em;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; -khtml-border-radius:100%;
-webkit-box-shadow:inset 0 0 10px #000000, 1px 0 1px rgba(225,225,225,0.1);
-moz-box-shadow:inset 0 0 10px #000000, 1px 0 1px rgba(225,225,225,0.1);
box-shadow:inset 0 0 10px #000000, 1px 0 1px rgba(225,225,225,0.1); -webkit-box-shadow: inset 0 0 10px #000000, 1px 0 1px rgba(225,225,225,0.1); -moz-box-shadow: inset 0 0 10px #000000, 1px 0 1px rgba(225,225,225,0.1); -khtml-box-shadow: inset 0 0 10px #000000, 1px 0 1px rgba(225,225,225,0.1);
background:#342f32;
color:#fff;
text-shadow: 0 0 0 transparent, 1px 1px 1px #000;
}
.quick .title{
  font-size: 20px;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 30px;
  margin-bottom: 15px;
  margin-top: 0;
  padding-bottom: 15px;
color:#fff;
font-family:'Open Sans',sans-serif;
text-tranform:uppercase
}
#widget-12 h3,#widget-14 h3,#widget-8 h3,#widget-10 h3,#widget-9 h3,#widget-11 h3,#widget-13 h3  {
margin:0 0 5px -10px;
-webkit-box-shadow:none;
-moz-box-shadow:none;box-shadow:none; -webkit-box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none;
background:none !important;
border:none ;-
webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -khtml-border-radius:0;
line-height:1
}
.module-title .title,#widget-12 h3,#widget-14 h3,#widget-8 h3,#widget-10 h3,.staffOnline h3,#widget-9 h3,#widget-11 h3,#widget-13 h3  {
font-size: 17px;
font-weight: normal;
letter-spacing: normal;
padding: 0 0 0 7px;
color:#fff;
font-family:'Open Sans',sans-serif;
text-tranform:uppercase;
color:#303030;
}
#widget-11 h3  a{
font-size: 17px;
}
.rt-module-arrow {
  height: 30px;
  left: -10px;
  margin: 0;
  position: absolute;
  width: 4px;
background-color:#55b8df;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(225,225,225,0.4);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(225,225,225,0.4);box-shadow:0 0 3px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(225,225,225,0.4); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(225,225,225,0.4); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(225,225,225,0.4); -khtml-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(225,225,225,0.4);}
.module-title{position:relative}
 
 
/*menu*/
ul.menu {
font-family:'Open Sans',sans-serif;
font-size:15px;
list-style:none;
margin:0 -10px;
padding:0;
}
 
ul.menu ul li a,ul.menu ul li .item,ul.menu ul li .separator {
background:none;
padding:8px 20px;
}
 
ul.menu ul li a:before,ul.menu ul li .item:before,ul.menu ul li .separator:before {
font-size:1em;
line-height:16px;
width:18px;
height:18px;
}
 
ul.menu ul li a:hover,ul.menu ul li .item:hover,ul.menu ul li .separator:hover {
background:none;
}
 
ul.menu ul ul li {
font-size:12px;
padding:0 20px 0 25px;
}
 
ul.menu > li {
position:relative;
border-bottom:1px solid #1B1919;
text-shadow: 0 0 0 transparent, -1px -1px 1px rgba(0,0,0,0.4);
}
 
ul.menu > li.active.current > .rt-sidebar-arrow,ul.menu > li#current.active > .rt-sidebar-arrow,ul.menu > li.active > .rt-sidebar-arrow {
width:4px;
height:100%;
position:absolute;
left:0;
z-index:1;
margin:0;
}
 
ul.menu > li.active.current:before,ul.menu > li#current.active:before,ul.menu > li.active:before {
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right-width:8px;
border-right-style:solid;
content:"";
position:absolute;
top:50%;
right:0;
margin-top:-8px;
z-index:1;
border-right-color:#f4f0e7;
}
 
ul.menu > li.active.current.parent:before,ul.menu > li#current.active.parent:before,ul.menu > li.active.parent:before {
top:24px;
}
 
ul.menu li a,ul.menu li .item,ul.menu li .separator {
display:block;
font-size:1em;
font-weight:700;
position:relative;
padding:14px 20px;
}
 
ul.menu li a:after,ul.menu li .item:after,ul.menu li .separator:after {
content:"\e0d8";
font-family:'icomoon';
margin-right:10px;
font-size:1.2em;
font-weight:400;
position:absolute;
right:10px;
}
 
ul.menu li > .rt-sidebar-arrow {
width:4px;
height:100%;
max-height:50px;
position:absolute;
left:0;
z-index:1;
margin:0;
}
 
ul.menu li.parent > .rt-sidebar-arrow {
max-height:47px;
}
 
ul.menu li.active.current > a:before,ul.menu li.active.current > .item:before,ul.menu li.active.current > .separator:before,ul.menu li#current.active > a:before,ul.menu li#current.active > .item:before,ul.menu li#current.active > .separator:before {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);
}
 
ul.menu li li a,ul.menu li li .item,ul.menu li li .separator {
padding:8px 20px 8px 35px;
}
 
ul.menu li li a:before,ul.menu li li a:before,ul.menu li li a:before,ul.menu li li .item:before,ul.menu li li .item:before,ul.menu li li .item:before,ul.menu li li .separator:before,ul.menu li li .separator:before,ul.menu li li .separator:before {
content:"\2022";
font-family:FontAwesome;
margin-right:10px;
display:inline;
font-size:1.8em;
font-weight:400;
position:absolute;
left:12px;
top:12px;
}
 
ul.menu li li.active.current > a:before,ul.menu li li.active.current > .item:before,ul.menu li li.active.current > .separator:before,ul.menu li li#current.active > a:before,ul.menu li li#current.active > .item:before,ul.menu li li#current.active > .separator:before {
left:4px;
top:14px;
}
 
ul.menu > li a, ul.menu > li .item, ul.menu > li .separator {-moz-transition: all 0.3s ease 0s;-webkit-transition: all 0.3s ease 0s;
  background-color: #342C2D;
  background-image: -moz-linear-gradient(center top , #3B3233, #352D2E 20%, #302929);
  background-repeat: no-repeat;
  box-shadow: 0 1px 0 rgba(225, 225, 225, 0.1) inset; -webkit-box-shadow: 0 1px 0 rgba(225, 225, 225, 0.1) inset; -moz-box-shadow: 0 1px 0 rgba(225, 225, 225, 0.1) inset; -khtml-box-shadow: 0 1px 0 rgba(225, 225, 225, 0.1) inset;
  color: #938F8C;
}
 
ul.menu > li > a:hover, ul.menu > li > .item:hover, ul.menu > li > .separator:hover, ul.menu > li > a#current.active, ul.menu > li > #current.item.active, ul.menu > li > #current.separator.active {
    padding-left:33px;
    background-color: #1A1819;
    background-image: -moz-linear-gradient(center top , #191718, #191718 75%, #1E1C1D);
    background-repeat: no-repeat;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(225, 225, 225, 0.4) inset; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(225, 225, 225, 0.4) inset; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(225, 225, 225, 0.4) inset; -khtml-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(225, 225, 225, 0.4) inset;
    color: #FFFFFF;
text-decoration:none
}
ul.menu > li:hover .rt-sidebar-arrow {
    background-color: #55B8DF;
    border-bottom: 1px solid #1B1919;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.9); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.9); -khtml-box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
a:hover{text-decoration:none !important}
.member_list  .pageContent {
  background: url("styles/bg1.png") repeat-y scroll 0 0 #F4F0E7 !important;
}
</style>
<div class="quick">
        <h2 class="title">Quick Menu</h2>
    </div>
<ul class="menu">
        <li class="home"><span class="rt-sidebar-arrow"></span><a href="http://hutek.info">Home page</a></li>
        <li class="forum"><span class="rt-sidebar-arrow"></span><a href="http://hutek.info/forum">Forum</a></li>
        <li class="mb"><span class="rt-sidebar-arrow"></span><a href="http://hutek.info/members/">Members</a></li>
        <li class="lib"><span class="rt-sidebar-arrow"></span><a href="#">Library</a></li>
    </ul>

upload attach to folder "styles" in your host

doibay · 21/2/13

cái này hay

sidebar, menu

zeleski Member

mickey Active Member

phamhuudu Verified User

mickey Active Member

nhoveai Member

zeleski Member

Dyn Member

mickey Active Member

Fox Of Dark Oáp.... Mấy ngày nay thức trễ

Các file đính kèm:

bg1.png

doibay Member

Chia sẻ trang này

Text Links

Textlink

Thông báo mới nhất