NavBar Dropdown Menu
+8
Slymask3
***AFINA***
ankillien
TGC HARDC0RE
Xenovive
Zukai
MrMario
harmeisteripod
12 posters
Page 1 of 1
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?
Something like this:
Downloads:
-Mods
-Themes
-Other
How would I go in doing that?
Re: NavBar Dropdown Menu
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
- Posts : 22186
Reputation : 1839
Language : test
Re: NavBar Dropdown Menu
Where do you insert the code?
Zukai- New Member
- Posts : 1
Reputation : 0
Language : English
Re: NavBar Dropdown Menu
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
Re: NavBar Dropdown Menu
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
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
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: NavBar Dropdown Menu
And how to make with?don't think it is possible without template editing
***AFINA***- Forumember
- Posts : 450
Reputation : 28
Language : English, Russian, Ukrainian, Greek, Photoshop
Location : The whole world
Re: NavBar Dropdown Menu
***AFINA*** wrote:And how to make with?don't think it is possible without template editing
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
Re: NavBar Dropdown Menu
Thank you, i`ll try now.
***AFINA***- Forumember
- Posts : 450
Reputation : 28
Language : English, Russian, Ukrainian, Greek, Photoshop
Location : The whole world
Re: NavBar Dropdown Menu
If somebody need:
HTML:
+ add this to your CSS:
And you`ll have a drop-down menu
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
***AFINA***- Forumember
- Posts : 450
Reputation : 28
Language : English, Russian, Ukrainian, Greek, Photoshop
Location : The whole world
Re: NavBar Dropdown Menu
I want something like that^
But like when your mouse goes over an image...
Thanks.
But like when your mouse goes over an image...
Thanks.
Re: NavBar Dropdown Menu
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.
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
- Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA
Re: NavBar Dropdown Menu
Slymask3 and blindbat1457,
Have you tried the script posted by AFINA above?
Have you tried the script posted by AFINA above?
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: NavBar Dropdown Menu
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:
Look:
Re: NavBar Dropdown Menu
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
- Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA
Re: NavBar Dropdown Menu
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
- Posts : 1286
Reputation : 21
Language : English
Re: NavBar Dropdown Menu
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)
(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
- Posts : 1286
Reputation : 21
Language : English
Re: NavBar Dropdown Menu
I tried it on an html page, and put it between the <body> tags...
Here is what i got:
Here is what i got:
Re: NavBar Dropdown Menu
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
- Posts : 1286
Reputation : 21
Language : English
Re: NavBar Dropdown Menu
Where did you put it in?rhe wrote:I don't know about an HTML page, but it works when put in where I put it.
A Template?
And if, then which one xP
Re: NavBar Dropdown Menu
No, I put it Display - Homepage - Generalities and then a widget. Worked on both.
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: NavBar Dropdown Menu
Okay, maybe I missed something in the code I posted before.
Here's one more time:
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
- Posts : 1286
Reputation : 21
Language : English
Similar topics
» How To make Dropdown menu/navbar ?
» How To make Dropdown menu/navbar
» Can I get this dropdown menu?
» CSS Dropdown Menu
» Dropdown Menu
» How To make Dropdown menu/navbar
» Can I get this dropdown menu?
» CSS Dropdown Menu
» Dropdown Menu
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum