Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: dropdown menu  (Read 130 times)

wimgiesen

  • Newbie
  • *
  • Karma: 0
  • Posts: 1
dropdown menu
« on: February 05, 2013, 09:11:11 PM »

LS,

I tried to make a dropdown menu with su(k/p)erfisch.
It is an addition to snews.php so nothing else has to be changed, and all functions of snews,php stay functioning as before.
Maybe someone can look at it because i am a bad programmer and even a worse designer.
Al the instructions are below.

Hope someone can use them.

Kind regards.
wim

Changest to make dropdown menu.

1. Changes in snews.php
2. add menu.css in css folder
3. add menu.js in js folder
4. make changes in index.php in header for js and css and add call to dropdown menu
just like in the original sidemenu the admin view can differ fom normal user becuse of the visibility of elements.

1, changes snews.php
----------------------------------
Add this code at the end of snews.php to incorporate the needed functions.
Code: [Select]
function dropdownt() {
// fuction :
// for each category
// 1. show articles first level
// 2. find sub-categories
// 3. show articles subcategorie (second level)
// 4. if a categorie only contains 1 visible article for a non-admin one can chose behavior with variable
//    done in function  make_title()
//                       - category and article title     $show_art_cat='';
//                       - categorie title                $show_art_cat='c';
//                       - article title                  $show_art_cat='a';
//
// if you want you can include contact and site-map functions etc.
// example of this included at end of menu but begin or inside also possible.
 
if (_ADMIN) {
    $result = mysql_query("SELECT * FROM categories where subcat = '0' ORDER BY catorder ASC" );
} else {
    $result = mysql_query("SELECT * FROM categories WHERE subcat = '0' AND published = 'YES' 
              ORDER BY catorder ASC");
}    
echo '<ul class="dropdown">';  
 
while($row = mysql_fetch_array($result)) {

// find articles direct owned by category
 if (_ADMIN) {   
   $result1 = mysql_query("SELECT * FROM articles where category = $row[id]  and position != 3");
} else {   
   $result1 = mysql_query("SELECT * FROM articles where category = $row[id] and visible = 'YES'  and position != 3");
}
  $num_arts1 = mysql_num_rows($result1);
   
// find  sub categories and articles
 if (_ADMIN) {
    $result2 = mysql_query("SELECT * FROM categories WHERE  subcat = $row[id] ");
   } else {
    $result2 = mysql_query("SELECT * FROM categories WHERE  subcat = $row[id] and published = 'YES' ");
   } 
  $num_cats2 = mysql_num_rows($result2);

if ($num_arts1 == 1 and !_ADMIN and $num_cats2 == 0) {// only one visible article and no categories and no admin
    make_title($row[id],$row[seftitle],$row[name]);
    } else {
        !_ADMIN ? $num_arts1 = ''  : $num_arts1= '('.$num_arts1.')'; // do not show number articles     
        echo '<li><a href="#" >'.$row[name].$num_arts1.'</a>';
        echo '<ul class="sub_menu">' ;
    articlett($row[id],$row[seftitle],''); // process all articles direct owned by sub-categorie

           while ($row2 = mysql_fetch_array($result2)) {
if (_ADMIN) {
        $resultc = mysql_query("SELECT * FROM articles WHERE category = $row2[id]  and position != 3");
} else {
$resultc = mysql_query("SELECT * FROM articles WHERE category = $row2[id] and visible = 'YES'  and position != 3");
}

            $num_art = mysql_num_rows($resultc);
   !_ADMIN ? $num_art = ''  : $num_art= '('.$num_art.')';   // do not show numg=ber of articles    
   echo '<li><a href="#" >'.$row2[name].$num_art.'</a>';
           echo '<ul >' ;
       articlett($row2[id],$row[seftitle],$row2[seftitle]);
   echo '</ul></li>';
       }
echo '</ul></li>'; 
}
}
// include here contact and sitemap in menu line if you want
     echo '<li><a href="'._SITE.$seftitle.'/contact">'. 'Contact' .'</a></li>';
echo '<li><a href="'._SITE.$seftitle.'/sitemap">'. 'Site map' .'</a></li>';
 echo '</ul>';

}

function articlett($id,$seftitle,$seftitle2) {
if (_ADMIN) {
   $result = mysql_query("SELECT * FROM articles WHERE category = $id   and position != 3");
  } else {
   $result = mysql_query("SELECT * FROM articles WHERE category = $id and visible = 'YES'  and position != 3 ");
  }   

while($row = mysql_fetch_array($result)) {
  if ($seftitle2 != "") // it is a article in a sub category {
    echo '<li><a href="'._SITE.$seftitle.'/'.$seftitle2.'/'.$row["seftitle"].'">'.$row['title'].'</a></li>';
  } else {
    echo '<li><a href="'._SITE.$seftitle.'/'.$row["seftitle"].'">'.$row['title'].'</a></li>';}   
  }

}

function make_title($id,$seftitle,$name) {
// function will decide what to show to a non admin user in case of a category with just one visible article :
// 1 article name
// 2 category name
// 3 both category name and article name.
// would be better to place this in the settingsfile, but than you musr make a modfy function fot it.

  $show_art_cat=strtolower('c'); // c,a or ''
  $result = mysql_query("SELECT * FROM articles where category = $id and visible = 'YES'  and position != 3");
  while ($row = mysql_fetch_array($result)) {
  if ($show_art_cat == 'a') {
     echo '<li><a href="'._SITE.$seftitle.'">'.$row[title].'</a></li>';
     } elseif ($show_art_cat == 'c') {
     echo '<li><a href="'._SITE.$seftitle.'">'.$name.'</a></li>';
     } else {
echo '<li><a href="#">'.$seftitle.'</a>';
     echo     '<ul class="sub_menu">';
     echo        '<li><a href="'._SITE.$seftitle.'">'.$row[title].'</a></li>';
    echo     '</ul>';
echo '</li>';
  }
  }

}
// end dropdownt function

2. Add menu.css in css folder
-----------------------------
Code: [Select]
/* start menu.css */
#menu {
width: 900px;
margin: 0;
list-style: none;
height: 36px;
background:#FFFFFF;
font-family: "Lucida Sans Unicode", Verdana, Sans-Serif;
}
/* LEVEL ONE */
ul.dropdown             { position: relative; list-style: none;padding:0;height:30px; }
ul.dropdown ,li                     { list-style-type:none;border-style:none;}
ul.dropdown li                      { font-weight: bold; float: left; background:silver;border-bottom:1px solid gray;}
ul.dropdown a:link                  { color:#F74600;}
ul.dropdown a:visited               { color:#F74600;}
ul.dropdown a:hover               { color: #000;}
ul.dropdown a:active                { color:#E5E5FF;} 
ul.dropdown li a                    { display: block; height:30px;padding: 4px 8px; border-right: 1px solid white;border-bottom: 1px solid black;color: #222;}
ul.dropdown li:last-child a         { border-right: 0px solid #333; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background:#E5E5E5;  color: black; position: relative;z-index:9999; }
ul.dropdown li.hover a              { color: black;height:30px; }

/* LEVEL TWO */
ul.dropdown ul { height:30px;visibility: hidden; position: absolute; top: 100%; left: 0; width:180px;}
ul.dropdown ul li { height:30px;font-weight: normal; background: #f6f6f6; color: #000; float: none;padding-left:0px; }
 
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block;color:#FFFFFF;border-bottom:1px solid gray;border-left:1px solid gray;  }

/* LEVEL THREE */
ul.dropdown ul ul { left: 100%; top: 0;padding-left:5px; }
ul.dropdown li:hover > ul { visibility: visible;}

/* end menu.css */

3. add menu.js in js folder.
----------------------------
Code: [Select]
// documentation
// thanks to su(p/ck)er fisch
$(function(){
    $("ul.dropdown li").hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css({"visibility":"visible"})
    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
   
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
});

4. Changes to index.php.
------------------------
a. in HEAD
Code: [Select]
<link rel="stylesheet" type="text/css" href="<?php echo _SITE;?>css/menu.css" media="all" />
<!-- <script type="text/javascript" src="<?php echo _SITE;?>js/jquery-1.8.3.min.js"></script> -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="<?php echo _SITE;?>js/menu.js"></script>

b. in BODY after    <div id="crumbs"><?php breadcrumbs(); ?></div> add :
Code: [Select]
  <div  id="menudiv" style="float:left;padding-bottom:50px;">
<div id="menu">
    <?php dropdownt();?>
</div>
  </div>

--------------------------- end of modifications------------------------------------------------------------ 


« Last Edit: February 06, 2013, 04:01:04 PM by Keyrocks »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: dropdown menu
« Reply #1 on: February 06, 2013, 04:03:26 PM »

Welcome to sNews wimgiesen - I've edited your post (above) only to enclose the scripts you've shared in code-blocks to make it easier for anyone who tests this out with you.  8)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU