Go Back   Teknolojibura.Com Paylaşım Formu > >



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ı
6321

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ş: 33
Mesajlar: 305
Seslenenler: 0 Mesaj(lar)
Etiketleyenler: 0 Konu(lar)
Tecrübe Puanı: 11
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{
    
height100%;
  }

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

  .
main{
    
padding10px 10px 0 10px;
  }

 @
media (min-width765px) {

    .
main{
      
positionabsolute;
      
widthcalc(100% - 40px); 
      
margin-left40px;
      
floatright;
    }

    
nav.sidebar:hover + .main{
      
margin-left200px;
    }

    
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
      
margin-left0px;
    }

    
nav.sidebar .navbar-brandnav.sidebar .navbar-header{
      
text-aligncenter;
      
width100%;
      
margin-left0px;
    }
    
    
nav.sidebar a{
      
padding-right13px;
    }

    
nav.sidebar .navbar-nav li:first-child{
      
border-top1px #e5e5e5 solid;
    
}

    
nav.sidebar .navbar-nav li{
      
border-bottom1px #e5e5e5 solid;
    
}

    
nav.sidebar .navbar-nav .open .dropdown-menu {
      
position: static;
      
floatnone;
      
widthauto;
      
margin-top0;
      
background-colortransparent;
      
border0;
      -
webkit-box-shadownone;
      
box-shadownone;
    }

    
nav.sidebar .navbar-collapsenav.sidebar .container-fluid{
      
padding0 0px 0 0px;
    }

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

    
nav.sidebar{
      
width200px;
      
height100%;
      
margin-left: -160px;
      
floatleft;
      
margin-bottom0px;
    }

    
nav.sidebar li {
      
width100%;
    }

    
nav.sidebar:hover{
      
margin-left0px;
    }

    .
forAnimate{
      
opacity0;
    }
  }
   
  @
media (min-width1330px) {

    .
main{
      
widthcalc(100% - 200px);
      
margin-left200px;
    }

    
nav.sidebar{
      
margin-left0px;
      
floatleft;
    }

    
nav.sidebar .forAnimate{
      
opacity1;
    }
  }

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

  
nav:hover .forAnimate{
    
opacity1;
  }
  
section{
    
padding-left15px;
  } 

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


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

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: 16:40.