Tekil Mesaj gösterimi - Bunu nasıl yapabilirim yardım edebilir misiniz?

Konu Bunu nasıl yapabilirim yardım edebilir misiniz?

09-01-2018, 21:50:58

#12

Kimlik doğrulama veya yönetimden onay bekliyor.

Arkadaşlar sadece mesaj var mı diye bakmaya girdim konuya bir suru yorum gelmiş ve bildirimle de görünmüyordu cok teşekkür ederim

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Değmez dostum bu adama. Ne selamı var ne sabahı, ne bir teşekkürü, ne bir beğenisi... Bari ben beğeneyim dedim mesajını bunca çaban boşa gitmesin. Yardımcı olacağın insanları iyi seçersen karşılığını da o kadar alırsın.

Dostum ne kadar düşüncesiz birisin sen ya foruma hergun Giriyorum mesaj varmı diye bakıyorum ama konuya bir suru yorum gelmiş bildirimlerde de yoktu o yüzden konuya hic bakmadım bu aksam bakayım dedim ve cok yeni gördüm yazılanları. Yardımcı olan herkese cok teşekkür ederim gerçekten cok araştırdım bu konuyu ve bulamamıştım.

Konuyu ilk açığım gün cok bir bilgisi olan arkadaş yazmadı ve bende herhalde yok dedim yardımcı olacak diye düşünüp konuya bakmadım bildirimde de görünmeyince konuya girmedim

GencTASARIM adlı üyeden alıntı: mesajı görüntüle

Ekstra eklenti kullanmadan HTML&CSS kullanarak yapmak mümkün. Sadece jQuery ile tıklanıp tıklanmadığını kontrol etmeliyiz.

Demo: Gitmek için tıklayın

<div class="box">
  <div class="title">Bu sayfa için ilgili aramalar</div>
  <ul class="list">
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor sit</li>
    <li id="open">
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </li>
  </ul>
  
</div>

.box {
  border:1px solid #ddd;
  padding:16px;
  width:500px;
  margin:0 auto;
  position:relative
}

.box ul {
  overflow:hidden;
  max-height:30px;
  transition:all 0.5s;
  position:relative;
  margin:10px 0 0 20px;
  padding:0;
  display:flex;
  flex-wrap:wrap
}

.box ul.active {
  max-height:500px;
  padding-bottom:30px;
}

.box ul::after {
  content:"";
  background:linear-gradient(to bottom,transparent 30%,#fff 100%);
  z-index:4;
  height:30px;
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  display:flex
}

.box ul li {
  width:50%
}
.box ul #open {
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  height:20px;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  cursor:pointer;
  transition:all 0.5s;
  width:30px;
}
.box ul.active #open{
  transform:rotate(180deg);
  margin-left:-15px;
}

$("#open").click(function(){
  var ul = $(this).closest("ul");
  if(ul.hasClass("active")){
    ul.removeClass("active");
  }else{
    ul.addClass("active");
  }
})

Hocam cok teşekkür ederim elinize bilginize saglik

Hunper adlı üyeden alıntı: mesajı görüntüle

Kabataslak aşağıdaki şekilde kullanabilirsiniz. Linklerin genişliklerini % olarak ayarladım yalnızca arkaplan renklerini kullanacağınız alana göre düzenlemeniz gerekir. Onun dışında bir sorun çıkmayacaktır diye düşünüyorum. Ayrıca sayfada FontAwesome zaten yüklüyse <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> bunu eklemenize gerek yoktur.

  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
/* açıklamaların arasında kalan kısmı kullanmayın */
body {
    background:#ddd;
}
/* açıklamaların arasında kalan kısmı kullanmayın */
  .sm-links {
    margin:0;
    padding:0;
    display:block;
    height:50px;
    overflow:hidden;
    background:#fff;
    transition:all .2s ease-in-out;
}
.sm-links li {
    list-style:none;
    padding:2px 5px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    transition:all .2s ease-in-out;
}
.sm-links li:nth-child(odd) {
    float:left;
    width:49%;
    transition:all .2s ease-in-out;
}
.sm-links li:nth-child(even) {
    float:right;
    width:49%;
    transition:all .2s ease-in-out;
}
.sm-links li a {
    display:block;
    color:#000;
    font-size:13px;
    text-decoration:none;
    font-family: Arial;
    transition:all .2s ease-in-out;
}
.sm-links li a:before {
    content: "\f111";
    font-family: FontAwesome;
    font-size:6px;
    float:left;
    margin:5px 5px 0 0;
}
.sm-toggle {
    height:auto !important;
    transition:all .2s ease-in-out;
}
.sm-button {
    width:100%;
    margin-top:-50px;
    position:relative;
    z-index:1000;
    transition:all .2s ease-in-out;
    height:50px;
    cursor:pointer;
    padding-top:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dddddd+0,dddddd+100&0+0,1+100 */
    background: -moz-linear-gradient(top, rgba(221,221,221,0) 0%, rgba(221,221,221,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(221,221,221,0) 0%,rgba(221,221,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(221,221,221,0) 0%,rgba(221,221,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dddddd', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
    text-align:center;
}
.sm-button-cur {
    margin-top:0;
    height:30px;
    transition:all .2s ease-in-out;
}
.sm-button span:before {
    display:inline-block;
    content:"\f063";
    transition:all .2s ease-in-out;
    padding-top:0 !important;
    font-family: FontAwesome;
    font-size:15px;
    color:#498eee;
}
.sm-button-cur span:before {
    content: "\f062";
    transition:all .2s ease-in-out;
}
  </style>
   
  <div class="show-more-links">
    
    <ul class="sm-links">
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
    </ul>
    <div class="cle"></div>
    <div class="sm-button"><span></span></div>
</div>
   
  <script>
$(function(){
    var a = 0;
    $('.sm-button').click(function(){
        $('.sm-button').toggleClass('sm-button-cur');
    });
});
  $(function(){
    var a = 0;
    $('.sm-button').click(function(){
        $('.sm-links').toggleClass('sm-toggle');
    });
});
</script>

Hocam elinize bilginize emeginize saglik cok araştırdım bunu ama bulamamıştım gerçekten cok isime yaradı.