Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Pages: [1] 2 3

Author Topic: Dropdown Menu - dynamic (sNews 1.5)  (Read 31273 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: 469
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: 469
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

Pali

  • Full Member
  • ***
  • Karma: 16
  • Posts: 111
    • LE-PAVON
Dropdown Menu - dynamic (sNews 1.5)
« Reply #4 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 #5 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!

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Dropdown Menu - dynamic (sNews 1.5)
« Reply #6 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

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
Dropdown Menu - dynamic (sNews 1.5)
« Reply #7 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
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Dropdown Menu - dynamic (sNews 1.5)
« Reply #8 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
"It's only dead fish that goes with the flow... "
Updated

Patric Ahlqvist

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

GREAAAAT ;) Thanks Oniip.
Logged
"It's only dead fish that goes with the flow... "
Updated

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Dropdown Menu - dynamic (sNews 1.5)
« Reply #10 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
"It's only dead fish that goes with the flow... "
Updated

Pali

  • Full Member
  • ***
  • Karma: 16
  • Posts: 111
    • LE-PAVON
Dropdown Menu - dynamic (sNews 1.5)
« Reply #11 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!

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Dropdown Menu - dynamic (sNews 1.5)
« Reply #12 on: February 24, 2007, 01:53:07 pm »

ADDING a new dropdown layout

Now this is based on Stu Nicholls A refined and improved CSS only drop-down menu, so all credits shoud and must go to him, read the copyright a bit down on his site.

All things should be performed as Oniips already has explained, the only difference is the CSS, which you get from the source of mentioned webpage. And a few must be changes in the snews code Oniip provided... I've marked the changes in red:

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.
    $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) {
            $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.='<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->';

            $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><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>\r\n";        }
   }
           echo "\r\n \r\n <!-- end category listing -->";
}
Also need to change in index.php from id to class:
Quote
<div class="menu">
            <ul><? categories_dropdown(); ?></ul>
            </div>
Now this validates, and should work in, and I quote:

"...This works in IE5.5, IE6, hopefully IE7 (confirmation anyone?), Firefox, Opera, Netscape 8 and Mac Firefox 1.5 and Safari though not Mac IE5.x."

The little sidenote I'm putting in here, is that this solucija is really made for handmade menu's as I understand it, and I've integrated it into sNews, which could feck up some browsers, I've tested it in FF and IE6, so... And input ?

Demo of this one, will come when I've finished the layout which I'm doing ;)
« Last Edit: February 20, 2008, 01:20:36 pm by philmoz »
Logged
"It's only dead fish that goes with the flow... "
Updated

Wolfgang

  • Newbie
  • *
  • Karma: 1
  • Posts: 20
    • http://1-2-3-4.info
Dropdown Menu - dynamic (sNews 1.5)
« Reply #13 on: February 25, 2007, 10:23:35 am »

During my Multiflex-3 template development a few months ago I created an improved and simplified version of one of Stu Nichols original drop-down menu designs. Main characteristics of my drop-down menu are:

#1: Tested live for Linux, Mac and Windows, and found valid for all current browsers.
#2: Pure CSS, no need for Javascrip to render the drop-down behavior.
#3: Main level links adapt to width of content.
#4: Scales perfectly up-/downward for changes in default browser font size.

Maybe my CSS-code can be of use for the sNews MOD suggested in this thread???

For demo, screenshots and download, go to my homepage:
www.1-2-3-4.info/webtemplates/multiflex3/dropdownmenu
Logged

Wolfgang

  • Newbie
  • *
  • Karma: 1
  • Posts: 20
    • http://1-2-3-4.info
Dropdown Menu - dynamic (sNews 1.5)
« Reply #14 on: February 27, 2007, 08:38:18 am »

Anybody still hanging around this thread?????
Logged
Pages: [1] 2 3