24 Tem 2021 21:01 Yeni Konu Oluştur

Haberler:

Üye kayıt esnasında E-posta adresinizin doğru olduğuna ve Aktivasyon Mailinize bakmayı unutmayın.


SMF 2.1 EKSTRA ŞIK BİR MENÜ v2 - CSS3-HTML5 uyumlu !

Başlatan anti-imha, 18 Tem 2015 14:27

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.



  1. 632

  2. 251
18 Tem 2015 14:27 Son düzenlenme: 19 Tem 2015 18:06 anti-imha

Çok söze gerek yok can sıkıntısı bir ara yapmıştım.. Bayram hediyesi olsun diye paylaştım.. Default tema ile tamamen uyumludur. İsteyen admin paneli uyumlu yapabilir ben uğraşmak istemedim...Örnek ektedir.

İndex.template.php aç:

Bul

    echo '
    <div id="header">
        <div class="frame">
            <h1 class="forumtitle">
                <a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a>
            </h1>';

    echo '
            ', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum">' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '';


Değiştir

    echo '
    <div id="header">
        <div class="frame">

            ', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum">' : '<div id="siteslogan" class="floatleft">' . $settings['site_slogan'] . '</div>', '';


    echo '
<NAV>
<UL>
  <LI><A href="#">ANASAYFA</A></LI>
  <LI><A href="#">FORUM</A>
  <UL>
    <LI><A href="#">ARAMA</A></LI>
    <LI><A href="#">UYELER</A></LI>
    <LI><A href="#">KULLANICI PANELi</A>
    <UL>
      <LI><A href="#">HTML</A></LI>
      <LI><A href="#">CSS</A></LI></UL></LI></UL></LI>
     
  <LI><A href="#">iNDiRME</A>
  <UL>
    <LI><A href="#">SMF</A></LI>
    <LI><A href="#">VBULLETIN</A></LI></UL></LI>
  <LI><A href="#">KiSiLESTiRME</A></LI>
    <LI><A href="#">DESTEK</A></LI>
   <LI><A href="#">HAKKINDA</A></LI>
  </UL></NAV>';

İndex.css aç:

Ekle:

nav {
        margin: 16px 0 0 0; text-align: center;    float: right;    padding-right: 2px;font-size: 12px;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
        background: #FFFFFF;
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #E2E9F3 70%); list-style: none; padding: 0px 20px; border-radius: 8px; display: inline-table; position: relative; box-shadow: 0px 0px 9px rgba(0,0,0,0.15);border:1px solid #ccc;
-webkit-box-shadow: 0 0 0 2px white, 0 6px 4px black;
-moz-box-shadow: 0 0 0 2px white, 0 6px 4px black;
box-shadow: 0 0 0 2px white, 0 6px 4px black;
}
nav ul::after {
    clear: both; display: block; content: "";
}
nav ul li {
    float: left;    font-weight: bold;border-radius: 3px;
}
nav ul li:hover {
    background: #ffa500;    font-weight: bold;
}
nav ul li:hover a {
color: #333;
}
nav ul li a {
    padding: 10px 20px; color: rgb(117, 117, 117); text-decoration: none; display: block;
}
nav ul ul {text-align: left;
    background: #f0f4f7; padding: 0px; border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;border-top-left-radius: 0;border-top-right-radius: 0; top: 100%; position: absolute;    float: left;
-webkit-box-shadow: 0 0 0 2px white, 0 6px 4px black;
-moz-box-shadow: 0 0 0 2px white, 0 6px 4px black;
box-shadow: 0 0 0 2px white, 0 6px 4px black;
}
nav ul ul li {
 float: none; position: relative; border-bottom: 1px solid #ccc;border-top: 1px solid #fff;
}
nav ul ul li a {
    padding: 0px 0x;
}
nav ul ul li a:hover {
    background: #e4e4e4;
}
nav ul ul ul {
    left: 100%; top: 0px; position: absolute;
}

Logonun da efektli olmasını istiyorsanız (Menünün yanında güzel oluyor bence .... ) İndex.css'de

Bul:

/* Float these items to the right */
#siteslogan, img#smflogo {
    margin: 0;
    padding-right: 2px;
    float: right;
    line-height: 50px;
    font-size: 1.8em;
}

Değiştir:

/* Float these items to the right */
#siteslogan, img#smflogo {
    margin: 0;
    padding-right: 2px;
    float: left;
    line-height: 50px;
    font-size: 1.8em;
}
/* Tweak the SMF logo */

  @keyframes slideDown {
   0% {
      transform: translateY(-100%);
   }
   50%{
      transform: translateY(8%);
   }
   65%{
      transform: translateY(-4%);
   }
   80%{
      transform: translateY(4%);
   }
   95%{
      transform: translateY(-2%);
   }       
   100% {
      transform: translateY(0%);
   }     
}

@-webkit-keyframes slideDown {
   0% {
      -webkit-transform: translateY(-100%);
   }
   50%{
      -webkit-transform: translateY(8%);
   }
   65%{
      -webkit-transform: translateY(-4%);
   }
   80%{
      -webkit-transform: translateY(4%);
   }
   95%{
      -webkit-transform: translateY(-2%);
   }       
   100% {
      -webkit-transform: translateY(0%);
   } 
}


img#smflogo
{
 animation-name: slideDown;
   -webkit-animation-name: slideDown; 

   animation-duration: 1s; 
   -webkit-animation-duration: 1s;

   animation-timing-function: ease; 
   -webkit-animation-timing-function: ease; 
    margin: 16px 0 0 0;
   visibility: visible !important; 
  }


v2'de:
Gölgelndirme eklendi
Ovalleme yapıldı
Renk uyumu sağlandı

*

  1. 1,140

  2. 106

  3. 344



  1. 632

  2. 251



  1. 632

  2. 251

eyw bir iki yerde sıkıntı vardı hallettim


MENU ×