Please login or register.

Login with username, password and session length
Advanced search  

News:

Latest sNews - sNews 1.7 - with its own forums - for discussion and user mods.

Pages: [1] 2 3

Author Topic: Dropdown Menu - dynamic (sNews 1.5)  (Read 37118 times)

Pali

  • Full Member
  • ***
  • Karma: 16
  • Posts: 111
    • LE-PAVON
Dropdown Menu - dynamic (sNews 1.5)
« on: February 20, 2007, 04:38:32 PM »

this mod is based on philmoz's Categories mod (link updated Apr.10.08, by Admin keys)

This mod dynamicly creates DropDown menu (described is horizontal menu).

Manual:

Behind categories() function in snews.php (around line 340) place new function:

Code: [Select]
// DISPLAY dropdown menu; CATEGORIES with dropdown Articles
function categories_dropdown() {
    $linkingSwitch=0;  // set to 1 to make category name act as a link to the category page.
    $showHomeAsCAT=0; // set to 0 to omit the Home link.
 //   if (!isset($_SESSION[db('website').'Logged_In'])){jsuser();}
    $categorySEF = get_id('category');
     /* *** 'HOME' IS A PAGE NOT A CATEGORY! *** */
    if($showHomeAsCAT==1){  echo '<li>'."\r\n".'<a href="'.db('website').'" title="'.s('website_title').'">'.l('home').'</a>'."\r\n".'</li>'."\r\n";    }
    /* ^^^^^  BUT HERE IT IS ANYWAY  ^^^^^ */
    $query = "SELECT * FROM ".db('prefix')."categories WHERE published = 'YES' ORDER BY catorder ASC";
    $result = mysql_query($query);
    while ($r = mysql_fetch_array($result)) {
        $calc_num_query = "SELECT * FROM ".db('prefix')."articles WHERE position = 1 AND category = $r[id] AND published = '1' ORDER BY date DESC";
        $cm_result = mysql_query($calc_num_query);
        $num_rows = mysql_num_rows($cm_result);
        if (($num_rows == 0 && isset($_SESSION[db('website').'Logged_In'])) || $num_rows > 0) {
            $category_title = $r['seftitle'];
            $echo= '<li>'."\r\n".'<a href="'.db('website').$r['seftitle'].'/" title="'.$r['description'].'" ';
            if ($linkingSwitch == 1){$echo.=' href="'.db('website').$r['seftitle'].'/" title="'.$r['description'].'"';}
            $echo.='>'.$r['name'];
            $echo.= (s('num_categories') == 'on' ? ' ('.$num_rows.')' : '').'</a>'."\r\n";
            $echo.='<ul>'."\r\n";
        while ($art = mysql_fetch_array($cm_result)) {
            $echo.= '<li><a href="'.db('website').$category_title.'/'.$art['seftitle'].'/" title="'.$art['title'].'">'.$art['title'].'</a></li>'."\r\n";           }
           echo $echo."</ul></li>\r\n";        }
   }
           echo "\r\n \r\n <!-- end category listing -->";
}
In index.php replace   
Code: [Select]
<div>
<ul>
<? categories() ?>
</ul>
</div>
with this
Code: [Select]
<div id="menudiv">

<ul id="menu">

<? categories_dropdown(); ?>

</ul>

</div>
Inside HEAD of index.php put
Code: [Select]
<script type="text/javascript" src="hover.js"></script>Create hover.js in root. Place this code inside this file:
Code: [Select]
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Above function is downloaded and described here

The Look of the dropdown is based in your.css. Example:
Code: [Select]
#menudiv {
float: right;

width: 600px;

height: 25px;

margin: 20px 0px 0px 0px;
}


#menu ul {

margin: 0px;

padding: 0px;

list-style: none;
}


#menu a {
display: block;

float: left;

width: 131px;

height: 20px;

padding: 3px 0px 0px 10px;
text-decoration:none;

background: #eee;
}


#menu li {

display: block;
float:left; /* add */
width:144px;

}

#menu li ul {
display: block;
position: absolute;
width: 144px;
left: -999em;
}

#menu li:hover ul, #menu li.sfhover ul {
display: block;
padding:25px 0 0 0;
width:144px;
left: auto;
}

* html #menu li:hover ul, #menu li.sfhover ul{margin-left:-141px;}

#menu li ul li a {
background: #ddd;
color: #333;
height:20px;
width: 131px;
padding: 3px 10px 0 0;
text-align:right;
border-bottom:1px solid #585e73;
border-right: 0px solid #fff;
text-decoration:none;
}

#menu li ul li a:hover {
background: #888;
color: #fff;
}
Important are widths, dont leave them!

I will make demo site soon.
« Last Edit: April 10, 2008, 06:09:38 PM by Keyrocks »
Logged
I like sNews!

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 476
Dropdown Menu - dynamic (sNews 1.5)
« Reply #1 on: February 20, 2007, 04:41:16 PM »

Nice mod. Cannot wait to see it in action.
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

Pali

  • Full Member
  • ***
  • Karma: 16
  • Posts: 111
    • LE-PAVON
Dropdown Menu - dynamic (sNews 1.5)
« Reply #2 on: February 20, 2007, 04:43:32 PM »

Quote from: tarmithius13
Nice mod. Cannot wait to see it in action.
My site in My Profile uses it by some way...
Logged
I like sNews!

tarmithius13

  • Sr. Member
  • ****
  • Karma: 7
  • Posts: 476
Dropdown Menu - dynamic (sNews 1.5)
« Reply #3 on: February 20, 2007, 04:46:30 PM »

Oh that is extremely nice, I also like the site. I may have to try this mod out on a template.
Logged
The trick to flying is to throw yourself at the ground and miss.

Free sNews templates HERE

bakercad

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 105
  • Posts: 1670
    • http://exit20.com
Dropdown Menu - dynamic (sNews 1.5)
« Reply #4 on: February 20, 2007, 05:23:38 PM »

Where is the function jsuser()?

Quote
$showHomeAsCAT=0; // set to 0 to omit the Home link.
    if (!isset($_SESSION[db('website').'Logged_In'])){jsuser();}
Logged

Pali

  • Full Member
  • ***
  • Karma: 16
  • Posts: 111
    • LE-PAVON
Dropdown Menu - dynamic (sNews 1.5)
« Reply #5 on: February 20, 2007, 05:28:46 PM »

Quote from: bakercad
Where is the function jsuser()?

Quote
$showHomeAsCAT=0; // set to 0 to omit the Home link.
    if (!isset($_SESSION[db('website').'Logged_In'])){jsuser();}
Sorry, thats from original script - its not needed here... I put // before that line
Logged
I like sNews!

Pali

  • Full Member
  • ***
  • Karma: 16
  • Posts: 111
    • LE-PAVON
Dropdown Menu - dynamic (sNews 1.5)
« Reply #6 on: February 20, 2007, 05:42:13 PM »

Demo is here

If you wanna same?
css styling is similar to the posted one; so just remove #menu {...} from original style.css (Minimal Design) and place there posted above...

In index.php replace

Code: [Select]
<ul id="menu">
<?php pages() ?>
</ul>
with

Code: [Select]
<div id="menudiv">
<ul id="menu">
<? categories_dropdown(); ?>
</ul>
</div>
Create hover.js and put posted JavaScript link into HEAD of index.php; insert function categories_dropdown to snews.php
« Last Edit: February 20, 2008, 02:27:26 PM by Patric Ahlqvist »
Logged
I like sNews!

bakercad

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 105
  • Posts: 1670
    • http://exit20.com
Dropdown Menu - dynamic (sNews 1.5)
« Reply #7 on: February 20, 2007, 07:53:09 PM »

FYI....I had to remove the red to get it to work
Quote
// DISPLAY dropdown menu; CATEGORIES with dropdown Articles
function categories_dropdown() {
    $linkingSwitch=0;  // set to 1 to make category name act as a link to the category page.
    $showHomeAsCAT=0; // set to 0 to omit the Home link.
 if (!isset($_SESSION[db('website').'Logged_In'])){jsuser();} // he did edit to comment this out...I removed, since it wasn't needed
    $categorySEF = get_id('category');
     /* *** 'HOME' IS A PAGE NOT A CATEGORY! *** */
    if($showHomeAsCAT==1){  echo '<li>'."\r\n".'<a href="'.db('website').'" title="'.s('website_title').'">'.l('home').'</a>'."\r\n".'</li>'."\r\n";    }
    /* ^^^^^  BUT HERE IT IS ANYWAY  ^^^^^ */
    $query = "SELECT * FROM ".db('prefix')."categories WHERE published = 'YES' ORDER BY catorder ASC";
    $result = mysql_query($query);
    while ($r = mysql_fetch_array($result)) {
        $calc_num_query = "SELECT * FROM ".db('prefix')."articles WHERE position = 1 AND category = $r[id] AND published = '1' ORDER BY date DESC";
        $cm_result = mysql_query($calc_num_query);
        $num_rows = mysql_num_rows($cm_result);
        if (($num_rows == 0 && isset($_SESSION[db('website').'Logged_In']))|| $num_rows > 0) {
            $category_title = $r['seftitle'];
            $echo= '<li>'."\r\n".'<a href="'.db('website').$r['seftitle'].'/" title="'.$r['description'].'" ';
            if ($linkingSwitch == 1){$echo.=' href="'.db('website').$r['seftitle'].'/" title="'.$r['description'].'"';}
            $echo.='>'.$r['name'];
            $echo.= (s('num_categories') == 'on' ? ' ('.$num_rows.')' : '').'</a>'."\r\n";
            $echo.='<ul>'."\r\n";
        while ($art = mysql_fetch_array($cm_result)) {
            $echo.= '<li><a href="'.db('website').$category_title.'/'.$art['seftitle'].'/" title="'.$art['title'].'">'.$art['title'].'</a></li>'."\r\n";           }
           echo $echo."</ul></li>\r\n";        }
   }
           echo "\r\n \r\n <!-- end category listing -->";
}
« Last Edit: August 27, 2007, 05:50:17 PM by Phil Martin (Philmoz) »
Logged

Keyrocks

  • Doug
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 451
  • Posts: 6288
  • Semantically Challenged
    • snews.ca
Dropdown Menu - dynamic (sNews 1.5)
« Reply #8 on: February 20, 2007, 08:49:24 PM »

Hey... Hey... Hey... this is looking very progressive. Well done guys! :)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

bakercad

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 105
  • Posts: 1670
    • http://exit20.com
Dropdown Menu - dynamic (sNews 1.5)
« Reply #9 on: February 20, 2007, 09:00:49 PM »

I also added an option to show or not show the number of articles with in the category.

Quote
// DISPLAY dropdown menu; CATEGORIES with dropdown Articles
function categories_dropdown() {
    $linkingSwitch=1;  // set to 1 to make category name act as a link to the category page.
    $showHomeAsCAT=1; // set to 0 to omit the Home link.
   $showNum_Art = 0; // set to 0 to omit the number of articles in the category ie... Cat Title(2) <-removes what is in the ( )
    $categorySEF = get_id('category');
     /* *** 'HOME' IS A PAGE NOT A CATEGORY! *** */
    if($showHomeAsCAT==1){  echo '
  • '."\r\n".''.l('home').''."\r\n".'
  • '."\r\n";    }
        /* ^^^^^  BUT HERE IT IS ANYWAY  ^^^^^ */
        $query = "SELECT * FROM ".db('prefix')."categories WHERE published = 'YES' ORDER BY catorder ASC";
        $result = mysql_query($query);
        while ($r = mysql_fetch_array($result)) {
            $calc_num_query = "SELECT * FROM ".db('prefix')."articles WHERE position = 1 AND category = $r[id] AND published = '1' ORDER BY date DESC";
            $cm_result = mysql_query($calc_num_query);
            $num_rows = mysql_num_rows($cm_result);
            if ($num_rows > 0) {
                $category_title = $r['seftitle'];
                $echo= '
  • '."\r\n".'            if ($linkingSwitch == 1){$echo.=' href="'.db('website').$r['seftitle'].'/" title="'.$r['description'].'"';}
                $echo.='>'.$r['name'];
                //// COMMENTED OUT  $echo.= (s('num_categories') == 'on' ? ' ('.$num_rows.')' : '').'
    '."\r\n";
                $echo.= ($showNum_Art == '1' ? ' ('.$num_rows.')' : '').''."\r\n";
                $echo.='
      '."\r\n";
              while ($art = mysql_fetch_array($cm_result)) {
                  $echo.= '
    • '.$art['title'].'
    • '."\r\n";           }
                 echo $echo."
  • \r\n";        }
       }
               echo "\r\n \r\n ";
    }
    Logged

    piXelatedEmpire

    • MIA
    • Thread Moderator
    • ULTIMATE member
    • *****
    • Karma: 37
    • Posts: 1454
    • currently MIA
    Dropdown Menu - dynamic (sNews 1.5)
    « Reply #10 on: February 20, 2007, 11:29:33 PM »

    great MOD!  :D
    Logged
    my apologies to the sNews crew, but I will be MIA for the forseeable future

    Patric Ahlqvist

    • Nobodys perfect, but Im pretty effing close
    • Administrator
    • ULTIMATE member
    • ******
    • Karma: 65
    • Posts: 4957
    • I'm a self-made man and worships my creator.
      • p-ahlqvist.com
    Dropdown Menu - dynamic (sNews 1.5)
    « Reply #11 on: February 21, 2007, 10:43:58 AM »

    That's the way, oniip... And Bobo ;) Great work guy's. See how easy it was - "No subcategories in sNews" phuuii all we need is some sNews coders with a will and knowledge extraordinaire :lol:

    I'm speachless. yes... ("dick" - No I wasn't ;) )
    Logged
    My sNews site
    "It's only dead fish that goes with the flow... "
    Updated, online again - Free designs

    Patric Ahlqvist

    • Nobodys perfect, but Im pretty effing close
    • Administrator
    • ULTIMATE member
    • ******
    • Karma: 65
    • Posts: 4957
    • I'm a self-made man and worships my creator.
      • p-ahlqvist.com
    Dropdown Menu - dynamic (sNews 1.5)
    « Reply #12 on: February 23, 2007, 02:40:37 PM »

    GREAAAAT ;) Thanks Oniip.
    Logged
    My sNews site
    "It's only dead fish that goes with the flow... "
    Updated, online again - Free designs

    Patric Ahlqvist

    • Nobodys perfect, but Im pretty effing close
    • Administrator
    • ULTIMATE member
    • ******
    • Karma: 65
    • Posts: 4957
    • I'm a self-made man and worships my creator.
      • p-ahlqvist.com
    Dropdown Menu - dynamic (sNews 1.5)
    « Reply #13 on: February 24, 2007, 10:49:11 AM »

    Validation fix:

    This do not validate due to the * margin-left:-141px; in the
    Quote
    #menu li:hover ul, #menu li.sfhover ul {display: block;padding:25px 0 0 0;* margin-left:-141px;width:144px;left: auto;}
    This must be "hacked" to be effecting IE, but still validate, and a simple thing to do is, extract that * margin-left:-141px; from this line, and make a new line benieth it where you insert:
    Quote
    * html #menu li:hover ul, #menu li.sfhover ul{margin-left:-141px;}
    Ohoh, almost forgot, as I deleted it right away... That opacity things, is not so valid either... If you want a valid menu with this solucija you need to get rid o'that.
    Logged
    My sNews site
    "It's only dead fish that goes with the flow... "
    Updated, online again - Free designs

    Pali

    • Full Member
    • ***
    • Karma: 16
    • Posts: 111
      • LE-PAVON
    Dropdown Menu - dynamic (sNews 1.5)
    « Reply #14 on: February 24, 2007, 10:59:01 AM »

    Quote from: Patric
    Validation fix:

    This do not validate due to the * margin-left:-141px; in the
    Quote
    #menu li:hover ul, #menu li.sfhover ul {display: block;padding:25px 0 0 0;* margin-left:-141px;width:144px;left: auto;}
    This must be "hacked" to be effecting IE, but still validate, and a simple thing to do is, extract that * margin-left:-141px; from this line, and make a new line benieth it where you insert:
    Quote
    * html #menu li:hover ul, #menu li.sfhover ul{margin-left:-141px;}
    Ohoh, almost forgot, as I deleted it right away... That opacity things, is not so valid either... If you want a valid menu with this solucija you need to get rid o'that.
    OK, changed and deleted in the original post ;) Thanks.
    Logged
    I like sNews!
    Pages: [1] 2 3