Menu tab sabitleme

17.12.2017 15:59

fatihclkl WM Aracı Kullanıcı

Üyelik 30.10.2013
Yaş/Cinsiyet 29 / E
Meslek Back-End Developer
Konum İstanbul Anadolu

Ad Soyad F** Ç**
Mesajlar 469
Beğeniler 162 / 43
Ticaret 8, (%100)

Merhaba arkadaşlar,
Sidebar menum var.Yanına tab sabitlemek istiyorum.
Menu id sinin kodu

#menu {

    width: 250px;

    position: fixed;

    right: 0px; 

    height: 100vh;

	background-color:#2f2f2f;

    color: #000;

    transition: all 0.3s;

    overflow-y: hidden;

	text-decoration:none;

   -webkit-box-shadow: -6px 14px 98px -15px rgba(0,0,0,0.59);

-moz-box-shadow: -6px 14px 98px -15px rgba(0,0,0,0.59);

box-shadow: -6px 14px 98px -15px rgba(0,0,0,0.59);

}

İstediğim aslında bu her ekran çözünürlüğünde soldaki sarı kutular yandaki gri kutulara sabit olması kaymaması. Nasıl yapabilirim.Yardımcı olursanız sevinirim.

18.12.2017 04:35

#2

27207 WM Aracı Anonim Üyelik

Üyelik 02.01.2014
Yaş/Cinsiyet - /
Meslek
Konum

Ad Soyad ** **
Mesajlar 1852
Beğeniler 346 / 707
Ticaret 5, (%100)

HTMLi göremediğim için kafadan örnek veriyorum.

.buyukkutu{display:block;width:500px;height:auto;}
.soldakikucukkutu{width:100px;}
vs vs

O turuncu menü ile siyah kısmı aynı kapsayıcının altına koyarsan beraber hareket ederler. Genişliklerini de % cinsinden verirsin. Bozulmadan, kaymadan, yolundan sapmadan efendice dururlar durdukları yerde.

1 kişi bu mesajı beğendi.

18.12.2017 15:00

#3

fatihclkl WM Aracı Kullanıcı

Üyelik 30.10.2013
Yaş/Cinsiyet 29 / E
Meslek Back-End Developer
Konum İstanbul Anadolu

Ad Soyad F** Ç**
Mesajlar 469
Beğeniler 162 / 43
Ticaret 8, (%100)

PHPacemisi



   
      
         1MENU
         
            MENU

            MENU

         

      

      
         6MENU
         
            MENU

            MENU

         

      

      
         MENU
      

      
         MENU
      

      
         MENU
      

   

   
      TEST
(Km)
         

         
      

   

   
      TEST
(Km/h)

         
      

   

   
      
         










                           AKTİF             
                           4                1             
                           5             
         

      

   

   
      
         










                           PASİF             
                           1                1             
                           2             
         

      

   

   Tfys
   


   
      Menu

      Menu

Hocam şöyle bir görüntü oluştu yine kayıyor.Yazıları vertical yapamadım hala yatay.


#menu {
    width: 250px;
position:fixed; 
    right: 0px; 
    height: 100vh;
	background-color:#2f2f2f;
    color: #000;
    transition: all 0.3s;
    overflow-y: hidden;
	text-decoration:none;
   -webkit-box-shadow: -6px 14px 98px -15px rgba(0,0,0,0.59);
-moz-box-shadow: -6px 14px 98px -15px rgba(0,0,0,0.59);
box-shadow: -6px 14px 98px -15px rgba(0,0,0,0.59);
}

 
#menu.active {
    left: 0;
}

#menu .menu-header {
    padding: 17px;
    background: #fff;
}

#menu ul.menu-components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#menu ul p {
    color: #fff;
    padding: 10px;
}

#menu ul li a {
    padding: 10px;
    padding-left: 30px;
	color: #fff;
    font-size: 0.9em;
    display: block;
	
}

#menu ul li a:hover {
    color: #ffc107;
    background: rgba(0, 0, 0, 0.2);
	text-decoration:none;
}

#menu ul li.active > a, #menu a[aria-expanded="true"] {
    color: #ffc107;
  
	text-decoration:none;
}
#menu ul ul a {
    font-size: 0.9em !important;
    padding-left: 80px !important;
}
#menu .box {
	margin:0;
	padding:5px 0 15px 0;
	color:#ffc107;
	text-align:center;
	background-color:#000;

	 
}
#menu .box-alarm {
	margin:0;
	padding:5px 0 1px 0;
	color:#ffc107;
	text-align:center;
	background-color:#2f2f2f;
	 
}
#menu a[data-toggle="collapse"] {
    position: relative;
}
#menu a[aria-expanded="false"]::before, #menu a[aria-expanded="true"]::before {
    content: '\f067';
    display: block;
    position: absolute;
    left: 10px;
	
 
    font-family: FontAwesome;
    font-size: 0.9em;
}
#menu a[aria-expanded="true"]::before {
    content: '\f068';
}
#menu-tabs {
       width: 25px;
    height: 278px;
    position: absolute;
    right: 250px;
    /* padding-top: 100px; */
    /* height: 100vh; */
    /* margin-top: 242px; */
    /* margin-bottom: 100px; */
    /* padding-bottom: 100px; */
    top: 302px;
    background-color: #ffc107;
    color: #000;
    text-decoration: none;
	
}
.vertical-text {
	transform: rotate(270deg);
	transform-origin: left top 50px;
	top:50px;
		float: left;

}

18.12.2017 18:38

#4

27207 WM Aracı Anonim Üyelik

Üyelik 02.01.2014
Yaş/Cinsiyet - /
Meslek
Konum

Ad Soyad ** **
Mesajlar 1852
Beğeniler 346 / 707
Ticaret 5, (%100)

HTML kodlarını gönderirsen düzeltivereyim. Anlatırım hem de.

18.12.2017 19:47

#5

fatihclkl WM Aracı Kullanıcı

Üyelik 30.10.2013
Yaş/Cinsiyet 29 / E
Meslek Back-End Developer
Konum İstanbul Anadolu

Ad Soyad F** Ç**
Mesajlar 469
Beğeniler 162 / 43
Ticaret 8, (%100)

PHPacemisi gönderdim hocam

Menu tab sabitleme

Üye Girişi Yap