Pages: [1]   Go Down
« previous next »
Send this topic | Print
Author Topic: Help with dropdown menu  (Read 333 times)
realm10
Member
*
Offline Offline

Posts: 8
« on: November 28, 2008, 01:49:48 AM »
Hey,

Firstly, how can I make the menu under the banner visible to everyone. Currently its displayed to only members.
It appears in stead of the "username: password:" boxes after you log in.


Secondly, the bigger problem is how do I make this menu drop down a list of links.
Currenty its just:

<<<<<banner>>>>>>

LINK 1  LINK 2  LINK 3  LINK 4


What I would like, when you hovar over:

<<<<<banner>>>>>>

|LINK 1| LINK 2  LINK 3 LINK 4
|Home|
|Forum|

The page is http://www.football2theworld.com/news.php

Ill include the theme.php and style.css files again:
THEME.PHP
Code:
<?php
if (!defined("IN_FUSION")) { die("Access Denied"); }

define("THEME_WIDTH", "910");
define("THEME_BULLET", "<img src='".THEME."images/bullet.gif' alt='' style='border:0' />");

require_once INCLUDES."theme_functions_include.php";


function render_page($license=false) {

 global $settings, $main_style;

 //Header
echo "<table cellspacing='0' cellpadding='0' width='".THEME_WIDTH."' class='outer-border center'>\n<tr>\n";
 echo "<td>\n";
echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
 echo "<tr><td class='header' width='100%'>";
 // Ust Arama Blok
 echo "
<ul id='nav'>
<div align='center'>
<font color='#FFFFFF'><font size=´5´><font family=´Verdana´><b>FOOTBALL2THEWORLD</b></family></font></size></span>
</ul></div>
";
// Ust Arama Blok Bitis
 echo "<tr><td height='300' background='".THEME."images/banner.gif' align='right' valign='middle'>
<table width='910' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>&nbsp;</td>
    <td width='220' align='center'>";
 echo "</tr>\n</table>\n";
 echo "</td>\n</tr>\n</table>\n";
 echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
 if (iMEMBER) {
echo "
<ul id='nav'>
<div align='center'>
<li class='top'><a href='".BASEDIR."index.php' class='top_link'><span>Home</span></a></li>
    <li class='top'><a href='#nogo1' class='top_link'><span>Link 1</span></a></li>
    <li class='top'><a href='#nogo1' class='top_link'><span>Link 2</span></a></li>
<li class='top'><a href='#nogo1' class='top_link'><span>Link 3</span></a></li>
<li class='top'><a href='#nogo1' class='top_link'><span>Link 4</span></a></li>
<li class='top'><a href='#nogo1' class='top_link'><span>Link 5</span></a></li>
<li class='top'><a href='#nogo1' class='top_link'><span>Link 6</span></a></li>
<li class='top'><a href='#nogo1' class='top_link'><span>Link 7</span></a></li>
<li class='top'><a href='#nogo1' class='top_link'><span>Link 8</span></a></li>
    <li class='top'><a href='#nogo1' class='top_link'><span>Link 9</span></a></li>
</ul></div>
";}
// uye giriž
else {
  echo "
<div id='uyemenu'>
<center><font color='#000000'>
<form name='loginform' method='post' action='setuser.php'> Username :
<input type='text' name='user_name' class='textbox' style='width:100px'> Password :
<input type='password' name='user_pass' class='textbox' style='width:100px'>
<input type='submit' name='login' value='  Submit  ' class='button'>
&nbsp;&nbsp;&nbsp;&nbsp;<a href='".BASEDIR."register.php'><font color='#000000'>Register</font></a>
<a href='".BASEDIR."lostpassword.php'><font color='#000000'>&nbsp;&nbsp;&nbsp;&nbsp;Lost Password</font></a>
</form></center></div> ";
 
 }
 //Content
 echo "<table cellpadding='0' cellspacing='0' width='100%' class='$main_style'>\n<tr>\n";
 if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
 echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
 if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
 echo "</tr>\n</table>\n";


//Footer
 echo "</tr>\n</table>\n";
 echo "<table cellpadding='0' cellspacing='0' width='910' height='100' align='center'>\n<tr>\n";
 echo "<td align='left' class='footer'>".stripslashes($settings['footer'])."<br />\n";
 if (!$license) { echo showcopyright()."<br /><br />\n"; } echo showcounter()."<br /><br />
<b> <a href='' target='blank'><img src='".THEME."images/THe.NeeD.png'></a></b>
\n";

 }





function render_news($subject, $news, $info) {

 echo "<br><table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
 echo "<td class='capmain'>".$subject."</td>\n";
 echo "</tr>\n<tr>\n";
 echo "<td class='main-body'>".$news."</td>\n";
 echo "</tr>\n<tr>\n";
 echo "<td align='center' class='news-footer'>\n";
 echo newsposter($info," &middot;").newsopts($info,"&middot;").itemoptions("N",$info['news_id']);
 echo "</td>\n</tr>\n</table>\n";

}


function render_article($subject, $article, $info) {
echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
 echo "<td class='capmain'>".$subject."</td>\n";
 echo "</tr>\n<tr>\n";
 echo "<td class='main-body'>".($info['article_breaks'] == "y" ? nl2br($article) : $article)."</td>\n";
 echo "</tr>\n<tr>\n";
 echo "<td align='center' class='news-footer'>\n";
 echo articleposter($info," &middot;").articleopts($info,"&middot;").itemoptions("A",$info['article_id']);
 echo "</td>\n</tr>\n</table>\n";

}

function opentable($title) {

 echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
 echo "<td class='capmain'>".$title."</td>\n";
 echo "</tr>\n<tr>\n";
 echo "<td class='main-body'>\n";

}

function closetable() {

 echo "</td>\n</tr>\n</table>\n";

}

function openside($title, $collapse = false, $state = "on") {
global $panel_collapse; $panel_collapse = $collapse;
echo "<table cellpadding='0' cellspacing='0' width='100%' class='border'>\n<tr>\n";
 echo "<td class='scapmain'>".$title."</td>\n";
 if ($collapse == true) {
 $boxname = str_replace(" ", "", $title);
 echo "<td class='scapmain' align='right'>".panelbutton($state,$boxname)."</td>\n";
 }
 echo "</tr>\n<tr>\n";
 echo "<td".($collapse == true ? " colspan='2'" : "")." class='side-body'>\n";
if ($collapse == true) { echo panelstate($state, $boxname); }

}

function closeside($collapse = false) {

 global $panel_collapse;

 if ($panel_collapse == true) { echo "</div>\n"; }
echo "</td>\n</tr>\n</table>\n";

}
?>

STYLE.CSS
Code:
/* Footer Link Rengi */
a {
color : #000000;

text-decoration : none;
}
/* Footer Link Rengi */

/* Footer Link Rengi Mause*/
a:hover {
color : #000000;
font-weight:bold;
text-decoration : none;
}
/* Footer Link Rengi Mause*/

/* Blok Link Rengi */
a.side {
color : #000000;
font-weight:bold;
text-decoration : none;
font-size:11px;
font-family : Verdana;

}
/* Blok Link Rengi */

/* Blok Link Rengi Mause */
a:hover.side {
color : #000000;
text-decoration : none;
font-size:11px;
font-family : Verdana;
}
/* Blok Link Rengi Mause */

a.white, li.white a {
color: #ddd;
text-decoration: none;
}

a:hover.white, li.white a:hover {
color: #ddd;
text-decoration: underline;
}

body {
color : #555;
background-image: url(images/bg.gif);
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
}

form {
margin : 0px;
}

hr {
height : 1px;
border : 1px solid #eee;
}

hr.side-hr {
height : 1px;
border : 1px solid #eee;
}

td {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
}

pre {
font-family : Verdana;
font-size : 11px;
}

.alt {
color : #005599;
}

.outer-border {
border : 1px solid #000;
}

.sub-header {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000;
background-color : #888;
border-top : 1px solid #000;
border-bottom : 1px solid #000;
padding : 5px;
}

.sub-header ul{
margin: 0;
padding: 0;
}

.sub-header ul li{
display: inline;
}

.sub-header ul li.first-link .bullet{
display: none;
}

.banner {

background-image: url(images/banner.gif) ;
}

.footer {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-image: url(images/header.gif);
border : 1px solid #ccc;
padding : 5px;
}

.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #555;
background-color : #f1f1f1;
height : 20px;
border : 1px solid #ccc;
margin-top : 2px;
}

.bbcode {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #555;
background-color : #F6F6F6;
border : 1px dashed #000000;
margin-top : 2px;
}

.textbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #555;
background-color : #f8f8f8;
border : 1px solid #ccc;
}

.main-body {
font-size : 14px;
color : #555;
background-image: #ffffff;
border : 1px line #000000;
padding : 4px 0px 5px 0px;
}

.center {
margin : 0 auto;
}

.side-body {
font-size : 10px;
color : #000000;
background-color: #E6E2D2;
border : 1px line #000000;
padding : 4px;
}

.main-bg {
color : #555;
background-color : #F7F7F7;
padding : 10px 10px 5px 10px;
}
/* Menu Dżs */
.border {
margin-bottom : 5px;
}
/* Menu Dżs Bitis*/
.admin-message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
text-align : center;
color : #555;
background-color : #f6f6f6;
border : 1px solid #e1e1e1;
padding : 3px 4px 5px 4px;
margin-bottom : 5px;
}

.side-left .side-border-right {display: none;}
.side-right .side-border-left {display: none;}

.side-border-left {
color : #777;
background-color : #fff;
padding : 10px 0px 10px 10px;
width: 175px;
}

.side-border-right {
color : #777;
background-color : #fff;
padding : 10px 10px 10px 0px;
width: 175px;
}

.news-category {
border:0;
margin:3px 5px 0 0;
float:left;
}

.news-footer {
font-size : 10px;
border:1;
height:16px;
color : #555;
background-image : url(images/nfooter.gif);
padding : 3px 4px 4px 4px;
}

.capmain {
font-family : Verdana;
font-size : 15px;
font-weight : bold;
color : #ffffff;
background-image : url(images/blok1.gif);
height:24px;
text-align : center;
padding : 2px 0px 4px 0px;
}

.scapmain {
font-family : Verdana;
font-size : 12px;
font-weight : bold;
color : #ffffff;
background-image: url(images/blok.gif);
height:20px;
text-align : right;
border-bottom : 1px dashed #e1e1e1;
padding : 4px;
}

.tbl-border {
border : 1px solid #e1e1e1;
}

.tbl {
font-size : 11px;
color : #555;
background-color : #fff;
padding : 4px;
}

.tbl1 {
font-size : 11px;
color : #555;
background-color : #fff;
padding : 4px;
}

.tbl2 {
font-size : 11px;
color : #555;
background-color: #FFFFFF ;
font-weight:bold;
padding : 4px;
}

.forum-caption {
font-size : 11px;
font-weight : bold;
color : #888;
background-color : #f1f1f1;
padding : 2px 4px 4px 4px;
}

.quote {
font-size : 11px;
color : #555;
background-color : #f8f8f8;
padding : 4px;
margin : 0px 20px 0px 20px;
border : 1px solid #bbb;
}

.poll {
height : 12px;
border : 1px solid #bbb;
font-size:11px;
font-family : Verdana;

}

.comment-name {
font-weight : bold;
color : #005599;
}

.shoutboxname {
font-weight : bold;
color : #005599;
background-color: #FFFFFF ;
}

.shoutbox {
color : #777;
background-color: #FFFFFF ;
}

.shoutboxdate {
font-size : 10px;
color : #800;
background-color: #FFFFFF ;
}

.small {
font-size : 10px;
font-weight : normal;
}

.small2 {
font-size : 10px;
font-weight : normal;
color : #555;
}

.side-small {
font-size : 10px;
font-weight : normal;
color : #555;
background-color : #f6f6f6;
}

.side-label {
color : #555;
background-color : #f1f1f1;
padding : 2px 2px 3px 2px;
}

/* Vertical Navigation */

#navigation h2 {
font-size: 10px;
color : #555;
background-color: #f1f1f1;
margin: 0;
padding: 4px;
}

#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
}

* html #navigation ul li{
   height: 1%;
}

#navigation a {
display: block;
color: #005599;
background-color: #f6f6f6;
padding: 2px;
text-decoration : none;
}

#navigation a:hover {
color: #f6f6f6;
background-color: #005599;
}

/* Page Navigation */

.pagenav {
padding: 0.4em;
}

.pagenav span {
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CACACA;
padding: 0.2em 0.4em 0.2em 0.4em;
margin: 0.2em;
}
/* Sayfa Gecis */
.pagenav a {
color: #000000;
background-color: #FFFFFF;
border: 1px solid #CACACA;
padding: 0.2em 0.4em 0.2em 0.4em;
margin: 0.2em;
text-decoration: none;
}

.pagenav a:hover {
color: #fff;
background-color: #0141AD;
font-weight:bold;
margin: 0.2em;
text-decoration: none;
}

/* CSS Menu Baslangżc */

.preload1 {background: url(images/six_0a.gif);}
.preload2 {background: url(images/six_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#000000 url(images/six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(images/six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(images/six_0a.gif) no-repeat right top;}

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(images/six_1.gif) no-repeat;}
#nav li:hover a.top_link span,
#nav a.top_link:hover span
{background:url(images/six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(images/six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}

#nav :hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#3f96a9 url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover > ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#3f96a9 url(images/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover > li a.fly
{background:#50b5d0 url(images/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}
/* ---------------------- CSS Menu Bitiž ---------------------- */
   

/* Alt Panel Bitis */
« Last Edit: November 28, 2008, 01:51:46 AM by realm10 » Logged
the one6152
Futsoc
Active Member
**
Offline Offline

Posts: 68

check out my site futsocusa.net


WWW
« Reply #1 on: November 28, 2008, 04:24:29 PM »
You could use a simple css drop down menu

I use it in my site and it works prety well

http://www.futsocusa.net

Menu
Code:
  <ul align="center">
    <li><a class="hide" >Link 1</a>
      <ul>
        <li><a href="/home.html" title="2004">home</a></li>
        <li><a href="/forum.html" title="2005">forum</a></li>
      </ul>
    </li>
    <li><a class="hide" href="/Link2.html">Link 2</a></li>
    <li><a class="hide" href="/Link3.html">Link 3</a></li>
    <li><a class="hide" href="/Link4.html">Link 4</a></li>
   </ul>

CSS
Code:
@charset "utf-8";
.menu {
font-family: arial, sans-serif;
width:1000px;
height:20px;
font-weight:bold;
weight:bold;
align:center;
position:relative;
font-size:11px;
z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000000;
width:100px;
height:20px;
text-align:center;
color:#deb505;
border:0px solid #deb505;
background:#000000;
line-height:20px;
font-size:11px;
overflow:hidden;
}
.menu ul {
padding:0;
margin:0;
list-style: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#660000;
background:#888888;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:20px;
left:0;
width:120px;
}
.menu ul li:hover ul li a.hide {
background:#660000;
color:#666666;
}
.menu ul li:hover ul li:hover a.hide {
background:#888888;
color:#660000;
}
.menu ul li:hover ul li ul {
display:none;
}
.menu ul li:hover ul li a {
display:block;
background:#660000;
color:#666666;
}
.menu ul li:hover ul li a:hover {
background:#888888;
color:#660000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:100px;
top:0;
}
.menu ul li:hover ul li:hover ul.left {
left:-120px;
Logged
Pages: [1]   Go Up
Send this topic | Print
« previous next »
Jump to: