Blog sitesi kodlaması sol açılır menü dosyam css kodlarını algılamıyor

CSS
,
6

Kapanıp açılmayla ilgili şunu yazabiliriz: solKenarCubuguButton ve solKenarCubugu'nu kapsayan bir wrapper yazıyoruz div olarak. Yani HTML’deki değişiklik:

    <div class="wrapper">
        <div class="solKenarCubuguButton"  onclick="toggleLeftSidebar()">

        </div>
        <div id="solKenarCubugu">
            <div>
                <section> 
                    <a href="anasayfa.html" target="_blank"> 
                    <img id="logoResim" alt="Kitap Logo " src="img/logo.png"> </a> 
                </section>
            </div> <br>
            
            <div class="solMenuResim">
                    <img alt="sol menu resim" src="img/logo1.png">
            </div> <br>
        
            <ul> 
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </div>
    </div>

bu şekilde. Toggle’lanmasını da solKenarCubuguButton'a bağladık. Artık Javascript kodunda erişilmesi gereken eleman da wrapper oldu, dolayısıyla

function toggleLeftSidebar(){
    document.getElementsByClassName("wrapper")[0].classList.toggle("opened");    
}

Son olarak da CSS dosyasının tamamı:

*{
	margin:0;
	padding:0;
	
}
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  padding: 0;
  margin: 0;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

img {
  max-width: 100%;
  height: auto;
}

input, textarea {
  border-radius: 0;
  border: 1px solid #ccc;
  padding: 10px 15px;
}

[type="text"],
[type="number"],
textarea {
  width: 100%;
}

.solMenuResim{
	vertical-align: middle;
	border-style: none;
	text-align: center;
	
}
#solKenarCubugu ul li{
	list-style:none;
	padding:10px 10px;
	border-bottom:1px solid rgba(255,255,255,0.4);
	cursor: pointer;
	transition: all 0.5s linear;

	
}
#solKenarCubugu ul li:hover{
	background-color:#c03926;

	
}
#solKenarCubugu ul li a{
	color:white;
	font-family:sans-serif;
	text-decoration:none;
	
}

.solKenarCubuguButton:before{
	content:"\f0c9";
	font-family:FontAwesome;
	color:black;
	position:absolute;
	font-size:28px;
	background-color: #e74c3c; 
	padding:5px 10px;
	transition: all 0.5s linear;
	
}
.solKenarCubuguButton:hover:before{
	background-color:#c03926;
	
}


.wrapper{
    position:fixed;
    width:200px;
    height:100%;
    background-color:#e74c3c;
    top:0;
    left:0;
    margin-left:0px;
}
.wrapper.opened{
    margin-left:-200px;
}

.solKenarCubuguButton {
    position:absolute;
	left:200px; 
	top:0;
}

#solKenarCubugu {
    /* position: relative;
    width:250px;
    height:100%;
    background-color:red;
    float:right; */

    position:fixed;
	width:200px;
	height:100%;
	background-color: #e74c3c;
}


main{margin-left:250px}

.kapsayici {
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
/* Banner */
.banner {
  padding: 30px 0;
  background-color: #125466;
  color: #fff;
  text-align: center;
}
.banner-baslik {
  font-size: 80px;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 20px;
 
}
.banner-slogan {
  font-style: italic;
  font-size: 20px;
}

/*İçerikler*/

.icerikler {
  padding: 40px 0;
  background: #fafafa;
  border-bottom: 1px solid #ddd;
}

.icerik {
  float: left;
  width: 49%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
}

.icerik figure {
  margin: 0;
}

.icerik + .icerik {
  margin-left: 2%;
}

Değişiklikler .wrapper ile ilgili olan kısımlar. Oraya bakarak değiştirebilirsiniz başka türlü istiyorsanız.

Şunu belirteyim ben HTML/CSS, website tasarımından anlıyor değilim, şuradaki yanıtı adapte etmeye çalıştım. Dolayısıyla bu esnek, kaliteli ve makul olan çözüm olmayabilir. Zaten diğer sorunuzu cevaplayacak yetkinliğim de yok. Belki başka bir başlık açmak isteyebilirsiniz ne de olsa başka bir soru bu konudaki asıl sorudan. Belki diğer arkadaşlar yardımcı olabilirler.

1 Beğeni