The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

NavBar Dropdown Menu

View previous topic View next topic Go down

NavBar Dropdown Menu

Post by harmeisteripod on June 6th 2010, 10:31 pm

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?

harmeisteripod
New Member

Male Posts : 9
Reputation : 0
Language : English
Location : Texas

http://ipodiphonemods.forumotion.com/

Back to top Go down

Re: NavBar Dropdown Menu

Post by MrMario on June 7th 2010, 12:10 am

Here you go.

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

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

Re: NavBar Dropdown Menu

Post by harmeisteripod on June 7th 2010, 1:00 am

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

harmeisteripod
New Member

Male Posts : 9
Reputation : 0
Language : English
Location : Texas

http://ipodiphonemods.forumotion.com/

Back to top Go down

Re: NavBar Dropdown Menu

Post by Zukai on June 13th 2010, 11:19 pm

Where do you insert the code?

Zukai
New Member

Posts : 1
Reputation : 0
Language : English

Back to top Go down

Re: NavBar Dropdown Menu

Post by Xenovive on June 19th 2010, 3:39 pm

*bump*

Xenovive
Forumember

Male Posts : 100
Reputation : 0
Language : English
Location : UK

http://www.XboxLiveLounge.com

Back to top Go down

Re: NavBar Dropdown Menu

Post by TGC HARDC0RE on June 19th 2010, 4:37 pm

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

TGC HARDC0RE
Forumember

Posts : 192
Reputation : 1
Language : english

Back to top Go down

Re: NavBar Dropdown Menu

Post by ankillien on June 19th 2010, 5:13 pm

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 Very Happy

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: NavBar Dropdown Menu

Post by ***AFINA*** on June 21st 2010, 2:46 pm

don't think it is possible without template editing
And how to make with?

***AFINA***
Forumember

Female Posts : 450
Reputation : 28
Language : English, Russian, Ukrainian, Greek, Photoshop
Location : The whole world

Back to top Go down

Re: NavBar Dropdown Menu

Post by ankillien on June 21st 2010, 4:46 pm

@***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.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: NavBar Dropdown Menu

Post by ***AFINA*** on June 21st 2010, 8:39 pm

Thank you, i`ll try now. Smile

***AFINA***
Forumember

Female Posts : 450
Reputation : 28
Language : English, Russian, Ukrainian, Greek, Photoshop
Location : The whole world

Back to top Go down

Re: NavBar Dropdown Menu

Post by ***AFINA*** on June 22nd 2010, 10:00 pm

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 Razz

***AFINA***
Forumember

Female Posts : 450
Reputation : 28
Language : English, Russian, Ukrainian, Greek, Photoshop
Location : The whole world

Back to top Go down

Re: NavBar Dropdown Menu

Post by Slymask3 on August 19th 2010, 4:34 am

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

Slymask3
Forumember

Male Posts : 39
Reputation : 0
Language : Canadian, Russian, HTML, JavaScript, CSS, JQuery.
Location : Canada

http://eo-legendz.net/

Back to top Go down

Re: NavBar Dropdown Menu

Post by blindbat1457 on August 19th 2010, 7:36 am

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.

blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: NavBar Dropdown Menu

Post by Graphoil on August 19th 2010, 9:28 am

Sounds like a job for Matei. Razz

Graphoil
Forumember

Posts : 162
Reputation : 0
Language : Spanish

http://isupport.forumotion.com

Back to top Go down

Re: NavBar Dropdown Menu

Post by ankillien on August 19th 2010, 3:51 pm

Slymask3 and blindbat1457,

Have you tried the script posted by AFINA above?

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: NavBar Dropdown Menu

Post by Slymask3 on August 19th 2010, 4:56 pm

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:



Slymask3
Forumember

Male Posts : 39
Reputation : 0
Language : Canadian, Russian, HTML, JavaScript, CSS, JQuery.
Location : Canada

http://eo-legendz.net/

Back to top Go down

Re: NavBar Dropdown Menu

Post by Emma8432 on August 19th 2010, 8:09 pm

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

Emma8432
Forumember

Female Posts : 219
Reputation : 11
Language : Meep
Location : Neptune

http://warriorcatsworld.forumotion.com

Back to top Go down

Re: NavBar Dropdown Menu

Post by Emma8432 on August 19th 2010, 8:22 pm

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

Emma8432
Forumember

Female Posts : 219
Reputation : 11
Language : Meep
Location : Neptune

http://warriorcatsworld.forumotion.com

Back to top Go down

Re: NavBar Dropdown Menu

Post by blindbat1457 on August 20th 2010, 2:54 pm

@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.

blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: NavBar Dropdown Menu

Post by Diana on August 21st 2010, 8:56 pm

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

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: NavBar Dropdown Menu

Post by Diana on August 25th 2010, 10:59 am

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>

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: NavBar Dropdown Menu

Post by Slymask3 on August 25th 2010, 3:26 pm

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

Slymask3
Forumember

Male Posts : 39
Reputation : 0
Language : Canadian, Russian, HTML, JavaScript, CSS, JQuery.
Location : Canada

http://eo-legendz.net/

Back to top Go down

Re: NavBar Dropdown Menu

Post by Diana on August 25th 2010, 4:21 pm

@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.

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: NavBar Dropdown Menu

Post by Slymask3 on August 26th 2010, 3:45 pm

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

Slymask3
Forumember

Male Posts : 39
Reputation : 0
Language : Canadian, Russian, HTML, JavaScript, CSS, JQuery.
Location : Canada

http://eo-legendz.net/

Back to top Go down

Re: NavBar Dropdown Menu

Post by Diana on August 26th 2010, 4:50 pm

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

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Re: NavBar Dropdown Menu

Post by Diana on August 26th 2010, 5:07 pm

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>

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum