Anasayfa Bugünki Mesajlar Sosyal Gruplar Kimler Online
Go Back   Teknolojibura.Com Paylaşım Formu > >
Sayfaya güncelle Css dikey Menü Örnegi?
Arama Bugünki Mesajlar Forumları Okundu Kabul Et


instagram takipçi satın al
Konu Bilgileri
Konu Başlığı
Css dikey Menü Örnegi?
Konudaki Cevap Sayısı
2
Şuan Bu Konuyu Görüntüleyenler
 
Görüntülenme Sayısı
11732

Yeni Konu aç Cevapla
 
Seçenekler Stil
Alt 13-10-2009, 13:09   #1
NOAH
 
NOAH - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: 01-10-2009
Yaş: 36
Mesajlar: 305
Seslenenler: 0 Mesaj(lar)
Etiketleyenler: 0 Konu(lar)
Tecrübe Puanı: 14
NOAH is on a distinguished road
Standart Css dikey Menü Örnegi?
Merhaba arkadaşlar,
css ile yapılmış web 2.0 formatına uyan dikey menü arıyorum. Önereceginiz menüler varmı? Yanlız bu menülerden bazılarına sub menü ekliyecegim.
NOAH isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Alt 04-07-2014, 04:39   #2
ipekreyon
 
ipekreyon - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: 04-07-2014
Mesajlar: 3
Seslenenler: 0 Mesaj(lar)
Etiketleyenler: 0 Konu(lar)
Tecrübe Puanı: 0
ipekreyon is on a distinguished road
Standart
merhabalar, isteklerinize uygun menüyü codecanyon vertical menu olarak arattığınızda bulacağınızı düşünüyorum. tabi bunlardan bazıları ücretli oluyor. ister ücret ödeyerek isterseniz oradaki menülerden ilhan alarak birşeyler ortaya çıkarabilirsiniz diye düşünüyorum.
ipekreyon isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Alt 26-01-2016, 00:12   #3
AspavA
 
AspavA - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: 15-01-2016
Mesajlar: 3
Seslenenler: 2 Mesaj(lar)
Etiketleyenler: 0 Konu(lar)
Tecrübe Puanı: 0
AspavA is on a distinguished road
Standart
@NOAH

sayfanın sol kısmında duracak şekilde bir menü örneğidir bu işine yarayabilir



HTML KODLARI

PHP- Kodu:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dikey menü</title>
  </head>
  <body>
      <nav class="navbar navbar-default sidebar" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
        <span class="sr-only">asp</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>      
    </div>
    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ana sayfa<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Kategoriler <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span></a>
          <ul class="dropdown-menu forAnimate" role="menu">
            <li><a href="{{URL::to('createusuario')}}">deneme</a></li>
            <li><a href="#">deneme1</a></li>
            <li><a href="#">deneme2</a></li>
            <li class="divider"></li>
            <li><a href="#">sub link</a></li>
            <li class="divider"></li>
            <li><a href="#">deneme</a></li>
          </ul>
        </li>          
        <li ><a href="#">Sub link<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a></li>        
        <li ><a href="#">deneme<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a></li>
      </ul>
    </div>
  </div>
</nav>
      <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" />    
      <link rel="stylesheet" href="style.css"  type="text/css" media="screen" />
      <link rel="stylesheet" href="css/fontello.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/animation.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/fontello-codes.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/fontello-embedded.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/fontello-ie7.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/fontello-ie7-codes.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/fa.css" type="text/css" media="screen" />
      <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Play' type="text/css" media="screen" />
      <script src="js/jquery.js"></script>
      <script src="js/bootstrap.min.js"></script>
</body>
</html> 
CSS KODLARI

PHP- Kodu:
body,html{
    height: 100%;
  }

  nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
      -moz-transition: margin 200ms ease-out;
      -o-transition: margin 200ms ease-out;
      transition: margin 200ms ease-out;
  }

  .main{
    padding: 10px 10px 0 10px;
  }

 @media (min-width: 765px) {

    .main{
      position: absolute;
      width: calc(100% - 40px); 
      margin-left: 40px;
      float: right;
    }

    nav.sidebar:hover + .main{
      margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
      text-align: center;
      width: 100%;
      margin-left: 0px;
    }
    
    nav.sidebar a{
      padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
      border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
      border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
      padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #777;
    }

    nav.sidebar{
      width: 200px;
      height: 100%;
      margin-left: -160px;
      float: left;
      margin-bottom: 0px;
    }

    nav.sidebar li {
      width: 100%;
    }

    nav.sidebar:hover{
      margin-left: 0px;
    }

    .forAnimate{
      opacity: 0;
    }
  }
   
  @media (min-width: 1330px) {

    .main{
      width: calc(100% - 200px);
      margin-left: 200px;
    }

    nav.sidebar{
      margin-left: 0px;
      float: left;
    }

    nav.sidebar .forAnimate{
      opacity: 1;
    }
  }

  nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
  }

  nav:hover .forAnimate{
    opacity: 1;
  }
  section{
    padding-left: 15px;
  } 
Konu AspavA tarafından (26-01-2016 Saat 00:15 ) değiştirilmiştir.
AspavA isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Yeni Konu aç Cevapla

Etiketler
css, dikey, menü, Örnegi

« önceki Konu | sonraki Konu »

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil
Normal Normal

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok
BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı


Sitemizde Yenimisiniz ? Yardım Konuları

Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 18:19.