Açılır üst menü simplemachines.org benzeri (1.1.x)

Başlatan Maxi, 22 Tem 2014, 17:00

« önceki - sonraki »

0 Üyeler ve 2 Ziyaretçiler konuyu incelemekte.

Aşağı git Sayfa1

Maxi

22 Tem 2014, 17:00






1.   Kullandığınız tema / index.template.php
Bul:
Kod Seç
</head>
<body>';

Altına ekle:
Kod Seç
echo'<div id="site_menu" class="align_right">
      <ul class="dropmenu" id="site_nav">
        <br></br>         
         <li>
            <a class="firstlevel" href="http://www.spinabifidaturkey.com/smf/index.php?page=page1357"><span class="firstlevel">Sınav</span></a>
            <ul>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page1357" class=""><span>Sınav 1</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page72" class=""><span>Sınav 2</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page1974" class=""><span>Sınav 3</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page2100" class=""><span>Sınav 4</span></a>
               </li>
            </ul>
         </li>
         <li>
            <a class="firstlevel" href="http://www.spinabifidaturkey.com/smf/index.php?page=page1357"><span class="firstlevel">Puzzle</span></a>
            <ul>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page4059" class=""><span>Derin</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page641" class=""><span>Gökay</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page1790" class=""><span>Gülbahar</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page4527" class=""><span>Hamza</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page4456" class=""><span>Hatice</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page3890" class=""><span>Kaan</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page2646" class=""><span>Serden</span></a>
               </li>
               
            </ul>
               </li>
               <li>
            <a class="firstlevel" href="http://www.spinabifidaturkey.com/smf/index.php?board=7.0"><span class="firstlevel">Üroloji</span></a>
            <ul>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?board=235.0" class=""><span>Dr. Arman ÖZDEMİR Bölümü</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?board=71.0" class=""><span>Doç. Dr. Tarkan SOYGUR Bölümü</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?board=122.0" class=""><span>+18</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?board=230.0" class=""><span>Sfinkter By-pass</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?page=page4456" class=""><span>Hatice</span></a>
               </li>
                           
            </ul>
         </li>
               </li>
               <li>
            <a class="firstlevel" href="http://www.spinabifidaturkey.com/smf/index.php?action=downloads"><span class="firstlevel">Download</span></a>
            <ul>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?action=downloads;cat=1" class=""><span>Spina Bifida Dökümanları</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?action=downloads;cat=2" class=""><span>Programlar</span></a>
               </li>
               <li>
                  <a href="http://www.spinabifidaturkey.com/smf/index.php?action=downloads;cat=3" class=""><span>Çocuklar için</span></a>
               </li>
                                       
            </ul>
         </li>
         <li>
            <a class="firstlevel" href="http://www.spinabifidaturkey.com/smf/index.php?board=286.0"><span class="firstlevel">ftrasiye</span></a>
         </li>
         <li>
            <a class="firstlevel" href="http://www.spinabifidaturkey.com/smf/index.php?topic=4759.msg21899#msg21899"><span class="firstlevel">Vip</span></a>
         </li>
<li>
            <a class="firstlevel" href="http://www.spinabifidaturkey.com/smf/index.php?page=page219"><span class="firstlevel">Sohbet</span></a>
         </li>
   
      </div>';

2. Eklediğiniz bu kodlardaki menü isimlerini ve linklerini kendinize   göre editleyin.

Kod Seç
/* Styles for the standard dropdown menus.
------------------------------------------------------- */
#main_menu
{
   padding: 0 0 0 0.5em;
   float: left;
   margin: 0;
   width: 98%;
}

.dropmenu, .dropmenu ul
{
   list-style: none;
   line-height: 1em;
   padding: 0;
   margin: 0;
}
.dropmenu
{
   padding: 0 0.5em;
}
.dropmenu a
{
   display: block;
   color: #000;
   text-decoration: none;
}
.dropmenu a span
{
   display: block;
   padding: 0 0 0 5px;
   font-size: 0.9em;
}
/* the backgrounds first level only*/
.dropmenu li a.firstlevel
{
   margin-right: 8px;
}
.dropmenu li a.firstlevel span.firstlevel
{
   display: block;
   position: relative;
   left: -5px;
   padding-left: 5px;
   height: 22px;
   line-height: 20px;
}
.dropmenu li
{
   float: left;
   padding: 0;
   margin: 0;
   position: relative;
}
.dropmenu li ul
{
   z-index: 90;
   display: none;
   position: absolute;
   width: 19.2em;
   font-weight: normal;
   border-bottom: 1px solid #999;
   background: url(images/theme/menu_gfx.png) 0 -100px no-repeat;
   padding: 7px 0 0 0;
}
.dropmenu li li
{
   width: 19em;
   margin: 0;
   border-left: 1px solid #999;
   border-right: 1px solid #999;
}
.dropmenu li li a span
{
   display: block;
   padding: 8px;
}
.dropmenu li ul ul
{
   margin: -1.8em 0 0 13em;
}

/* the active button */
.dropmenu li a.active
{
   background: url(images/theme/menu_gfx.png) no-repeat 100% 0;
   color: #fff;
   font-weight: bold;
}
.dropmenu li a.active span.firstlevel
{
   background: url(images/theme/menu_gfx.png) no-repeat 0 0;
}
/* the hover effects */
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
   background: url(images/theme/menu_gfx.png) no-repeat 100% -30px;
   color: #fff;
   cursor: pointer;
   text-decoration: none;
}
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel
{
   background: url(images/theme/menu_gfx.png) no-repeat 0 -30px;
}
/* the hover effects on level2 and 3*/
.dropmenu li li a:hover, .dropmenu li li:hover>a
{
   background: #d4dbe4;
   color: #000;
   text-decoration: none;
}
.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul
{
   top: -999em;
}
.dropmenu li li:hover ul
{
   top: auto;
}
.dropmenu li:hover ul
{
   display: block;
}
.dropmenu li li.additional_items
{
   background-color: #fff;
}

/* The dropdown menu toggle image */
#menu_toggle
{
   float: right;
   margin-right: 10px;
   padding-top: 3px;
}
#menu_toggle span
{
   position: relative;
   right: 5000px;
}

/* Styles for the standard button lists.
------------------------------------------------------- */

.buttonlist ul
{
   z-index: 100;
   padding: 5px;
   margin: 0 0.2em 0 0;
}
.buttonlist ul li
{
   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
}
.buttonlist ul li a
{
   display: block;
   font-size: 0.8em;
   color: #444;
   background: url(images/theme/menu_gfx.png) no-repeat 0 -60px;
   padding: 0;
   margin-left: 12px;
   text-transform: uppercase;
   cursor: pointer;
}
.buttonlist ul li a:hover
{
   background: url(images/theme/menu_gfx.png) no-repeat 0 0;
   color: #fff;
   text-decoration: none;
}
.buttonlist ul li a span
{
   background: url(images/theme/menu_gfx.png) no-repeat 100% -60px;
   display: block;
   height: 24px;
   line-height: 20px;
   padding: 0 8px 0 0;
   position: relative;
   right: -8px;
}
.buttonlist ul li a:hover span
{
   background: url(images/theme/menu_gfx.png) no-repeat 100% 0;
}
/* the active one */
.buttonlist ul li a.active
{
   background: url(images/theme/menu_gfx.png) no-repeat 0 -30px;
   color: #fff;
   font-weight: bold;
}
.buttonlist ul li a.active span
{
   background: url(images/theme/menu_gfx.png) no-repeat 100% -30px;
}
.buttonlist ul li a.active
{
   font-weight: bold;
}
.buttonlist ul li a.active:hover
{
   color: #ddf;
}
.align_top ul li a, .align_bottom ul li a
{
   margin: 0 12px 0 0;
}

/* the navigation list */
ul#navigation
{
   margin: 0;
   font-size: 0.9em;
   padding: 1em 0.4em;
}
ul#navigation li
{
   float: none;
   font-size: 0.95em;
   display: inline;
}

#adm_submenus
{
   padding-left: 2em;
}
#adm_submenus, #adm_submenus ul
{
   height: 3em;
   overflow: auto;
}

4. Ekteki sıkıştırılmış klasör içinden çıkan theme isimli klasörü   kullandığınız tema / images klasörünün içine atın.

3. Kullandığınız tema style.css açın ve en alta   ekleyin.
Yukarı git Sayfa1