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

Ç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

Kod Seç Genişlet

    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

Kod Seç Genişlet

    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:

Kod Seç Genişlet

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:

Kod Seç Genişlet

/* 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:

Kod Seç Genişlet

/* 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ı

Paylaşım için Teşekkürler

Güzel Paylaşım Teşekkürler

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