NavBar Dropdown Menu

I want to make a menu in the navbar that will drop down to more links.
Something like this:

Downloads:
-Mods
-Themes
-Other

How would I go in doing that?

Here you go.

Code:

<FORM>
<SELECT  NAME="url" WIDTH=20></SELECT>
<SELECT  NAME="url" WIDTH=20></SELECT>
<SELECT  NAME="url" WIDTH=20></SELECT>
</FORM>

and how does this work? I just put it in the navigation widget or what?

Where do you insert the code?

*bump*

i think the code goes in the css thing but im not sure im going to try it now

Hello,

I don't think it is possible without template editing. You are using phpBB3 forum and template editing is not available on it (it is only for phpBB2 and punBB).

However, you can put a drop down menu on homepage message, custom widget or forum description. You can search for drop down menu script on google

don't think it is possible without template editing

And how to make with?

***AFINA*** wrote:

don't think it is possible without template editing

And how to make with?

It mostly depends on the script you are using.
Basically, you can add it in a <li> tag after {GENERATE_NAVBAR} code found in overall_header_new template.

Thank you, i`ll try now.

If somebody need:

HTML:

Code:

<div class="menu">
    <ul>
        <li><a class="hide" href="">Part 1</a>
 
        <!--[if lte IE 6]>
        <a href="">Part  1
        <table><tr><td>
        <![endif]-->
 
            <ul>
                <li><a href="" title="">Page 1</a></li>
                <li><a href="" title="">Page  1.1</a></li>
                <li><a href="" title="">Page  1.2</a></li>
            </ul>
 
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
 
        </li>
 
        <li><a class="hide" href="">Part  2</a>
 
        <!--[if lte IE 6]>
        <a href="">Part  2
        <table><tr><td>
        <![endif]-->
 
            <ul>
                <li><a href="" title="">Page  2</a></li>
                <li><a href="" title="">Page  2.1</a></li>
                <li><a href="" title="">Page  2.2</a></li>
                <li><a href="" title="">Page  2.3</a></li>
                <li><a href="" title="">Page  2.4</a></li>
                <li><a href="" title="">Page  2.5</a></li>
            </ul>
 
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
 
        </li>
 
</ul>
</div>

+ add this to your CSS:

Code:

.menu{
    font-family:arial, sans-serif;
    width:212px;
    height:100px;
    position:relative;
    font-size:11px;
    z-index:100
}
.menu ul li a, .menu ul li a:visited{
    display:block;
    text-decoration:none;
    color:#000;
    width:104px;
    height:20px;
    text-align:center;
    color:#fff;
    border:1px solid #fff;
    background:#710069;
    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:#fff;
    background:#36f
}
.menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
}
.menu ul li:hover ul li a:hover{
    background:#6fc;
    color:#000
}

And you`ll have a drop-down menu

I want something like that^
But like when your mouse goes over an image...
Thanks.

Yes I want something like that but on the navbar one of the images drop down.

So I have forums, portal, search, etc and then downloads and hover over downloads and a drop down comes down with the types of downloads.

And no not illegal downloads.

Sounds like a job for Matei.

Slymask3 and blindbat1457,

Have you tried the script posted by AFINA above?

Yes, but only on an html page, and it worked, but i wanted it to be when the mouse goes over an image, so i added a <img src="URL HERE"> in replaced of the title, the image was there, but it was cut off, and had a background color..

Look:

I would love to be able to do this.. I'm going to try what you guys said.

I would love to be able to do this.. I'm going to try what you guys said.

ankillien wrote:Slymask3 and blindbat1457,

Have you tried the script posted by AFINA above?

Yes but two things. How do you get it on the Navbar and it shows up as some ugly purple box.

I went and pasted it in the template as well but either way you can't put it in a specific spot on the Navbar.

Yes. That is what I want to know aswell. I've been asking for it for so long and nobody gets what I want.

Right so. I found this code. It works a bit like a drop down menu but you have to click on the text or image. Try it out for yourselves. I haven't figured out how to get the links next to each other instead of on top of each other.
(I put the code into Display - Homepage - Generalities box)

Code:

<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document·cookie.length > 0) {
offset = document·cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document·cookie.indexOf(";", offset);
if (end == -1) end = document·cookie.length;
returnvalue=unescape(document·cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document·cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document·cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>
<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">Text or image</p></h3><div id="sc1" class="switchcontent">
Text or image
</div>


<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Text or image</h3><div id="sc2" class="switchcontent">
Text or image
</div>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">Image or text</h3><div id="sc3" class="switchcontent">
Text or image
</div>

I tried it on an html page, and put it between the <body> tags...
Here is what i got:

Slymask3 wrote:I tried it on an html page, and put it between the <body> tags...
Here is what i got:

I don't know about an HTML page, but it works when put in where I put it.
Did you click on the bigger Text or Image? It should hide the smaller text or image.

rhe wrote:I don't know about an HTML page, but it works when put in where I put it.

Where did you put it in?
A Template?
And if, then which one xP

No, I put it Display - Homepage - Generalities and then a widget. Worked on both.

Okay, maybe I missed something in the code I posted before.
Here's one more time:

Code:

<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document·cookie.length > 0) {
offset = document·cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document·cookie.indexOf(";", offset);
if (end == -1) end = document·cookie.length;
returnvalue=unescape(document·cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document·cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document·cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script><h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Difference betwen Java & JavaScript?</h3>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">What is DHTML?</h3>
<div id="sc3" class="switchcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>