Stylowe, boczne wysuwane menu

przez - kwietnia 26, 2015

Demo - najedź kursorem na menu poniżej

Jak umieścić menu na Bloggerze?

Zaloguj się na swoje konto i przejdź do menu Szablon => Edytuj kod HTML.
Kliknij w okno edytora i wciśnij kombinację klawiszy Ctrl+F. Używając wyszukiwarki znajdź:
</head>
Tuż nad znalezionym znacznikiem wklej kod:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Teraz wyszukaj:
]]></b:skin>
I tuż nad nim wklej kod:
/* Stylowe, boczne, wysuwane menu
----------------------------------------------- */
.logo {

} 

.settings {
    height: 73px;
    float: left;
    background: url(http://s3.postimg.org/bqfooag4z/startific.jpg);
    background-repeat: no-repeat;
    width: 250px;
    margin: 0px;
    text-align: center;
    font-size: 20px;
    font-family: 'Arial', sans-serif;
}
/* ScrolBar  */

.scrollbar {
    height: 90%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}
.scrollbar:hover {
    height: 90%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Scrollbar Style */

#style-1::-webkit-scrollbar-track {
    border-radius: 2px;
}
#style-1::-webkit-scrollbar {
    width: 5px;
    background-color: #F7F7F7;
}
#style-1::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #BFBFBF;
}
/* Scrollbar End */

.fa-lg {
    font-size: 1em;
}
.fa {
    position: relative;
    display: table-cell;
    width: 55px;
    height: 36px;
    text-align: center;
    top: 12px;
    font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
    width: 250px;
    overflow: hidden;
    opacity: 1;
}
.main-menu {
    background: #F7F7F7;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 55px;
    overflow: hidden;
    -webkit-transition: width .2s linear;
    transition: width .2s linear;
    -webkit-transform: translateZ(0) scale(1, 1);
    box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
    opacity: 1;
}
.main-menu>ul {
    margin: 7px 0;
}
.main-menu li {
    position: relative;
    display: block;
    width: 250px;
}
.main-menu li>a {
    position: relative;
    width: 255px;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    color: #8a8a8a;
    font-size: 13px;
    text-decoration: none;
    -webkit-transform: translateZ(0) scale(1, 1);
    -webkit-transition: all .14s linear;
    transition: all .14s linear;
    font-family: 'Arial', sans-serif;
    border-top: 1px solid #f2f2f2;
    text-shadow: 1px 1px 1px #fff;
}
.main-menu .nav-icon {
    position: relative;
    display: table-cell;
    width: 55px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
}
.main-menu .nav-text {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 190px;
    font-family: 'Arial', sans-serif;
}
.main-menu .share {} .main-menu .fb-like {
    left: 180px;
    position: absolute;
    top: 15px;
}
.main-menu>ul.logout {
    position: absolute;
    left: 0;
    bottom: 0;
}
.no-touch .scrollable.hover {
    overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
    overflow-y: auto;
    overflow: visible;
}
/* Logo Hover Property */

.settings:hover,
settings:focus {
    background: url(http://s17.postimg.org/74cl7s05b/logo_hover.jpg);
    -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    -moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    -o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
}
.settings:active,
settings:focus {
    background: url(http://s3.postimg.org/bqfooag4z/startific.jpg);
    -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
    -moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
    -o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
    transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
}
a:hover,
a:focus {
    text-decoration: none;
    border-left: 0px solid #F7F7F7;
}
nav {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
nav ul,
nav li {
    outline: 0;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
/* Darker element side menu Start*/

.darkerli {
    background-color: #ededed;
    text-transform: capitalize;
}
.darkerlishadow {
    background-color: #ededed;
    text-transform: capitalize;
    -webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
    -moz-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
    box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}
.darkerlishadowdown {
    background-color: #ededed;
    text-transform: capitalize;
    -webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
    -moz-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
    box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}
/* Darker element side menu End*/

.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
    color: #fff;
    background-color: #00bbbb;
    text-shadow: 0px 0px 0px;
}
.area {
    float: left;
    background: #e2e2e2;
    width: 100%;
    height: 100%;
}
Linki zawarte w powyższym kodzie możesz zamienić na bezpośrednie adresy do swojego logo.
Teraz wyszukaj znacznik:
</body>
I tuż nad nim wklej poniższy kod:
<nav class="main-menu">
   <div>
      <a class="logo" href="#">
      </a>
   </div>
   <div class="settings">
   </div>
   <div class="scrollbar" id="style-1">
   <ul>
      <li>
         <a href="http://www.blokotek.pl">
         <i class="fa fa-home fa-lg">
         </i>
         <span class="nav-text">
         Start
         </span>
         </a>
      </li>
      <li>
         <a href="#">
         <i class="fa fa-user fa-lg">
         </i>
         <span class="nav-text">
         Logowanie
         </span>
         </a>
      </li>
      <li>
         <a href="#">
         <i class="fa fa-envelope-o fa-lg">
         </i>
         <span class="nav-text">
         Kontakt
         </span>
         </a>
      </li>
      <li>
         <a href="#">
         <i class="fa fa-heart-o fa-lg">
         </i>
         <span class="nav-text">
         Profile
         </span>
         </a>
      </li>
      <li class="darkerlishadow">
         <a href="#">
         <i class="fa fa-clock-o fa-lg">
         </i>
         <span class="nav-text">
         Newsy
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-desktop fa-lg">
         </i>
         <span class="nav-text">
         Technologia
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-plane fa-lg">
         </i>
         <span class="nav-text">
         Podróże
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-shopping-cart">
         </i>
         <span class="nav-text">
         Zakupy
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-microphone fa-lg">
         </i>
         <span class="nav-text">
         Film i Muzyka
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-flask fa-lg">
         </i>
         <span class="nav-text">
         Webmastering
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-picture-o fa-lg">
         </i>
         <span class="nav-text">
         Sztuka
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-align-left fa-lg">
         </i>
         <span class="nav-text">
         Czasopisma
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-gamepad fa-lg">
         </i>
         <span class="nav-text">
         Gry
         </span>
         </a>
      </li>
      <li class="darkerli">
         <a href="#">
         <i class="fa fa-glass fa-lg">
         </i>
         <span class="nav-text">
         Styl Życia
         </span>
         </a>
      </li>
      <li class="darkerlishadowdown">
         <a href="#">
         <i class="fa fa-rocket fa-lg">
         </i>
         <span class="nav-text">
         Rozrywka
         </span>
         </a>
      </li>
   </ul>
   <li>
      <a href="#">
      <i class="fa fa-question-circle fa-lg">
      </i>
      <span class="nav-text">
      Pomoc
      </span>
      </a>
   </li>
   <ul class="logout">
      <li>
         <a href="#">
         <i class="fa fa-lightbulb-o fa-lg">
         </i>
         <span class="nav-text">
         Blog 
         </span>
         </a>
      </li>
   </ul>
   </div>
</nav>
# w powyższym kodzie zamień na linki do kategorii.
Na koniec Zapisz szablon.
Kody ikon znajdziesz na stronie czcionki Font Awesome.

Zobacz również

0 komentarzy