Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome, Guest. Please login or register.
Did you miss your activation email?

August 19, 2022, 05:31:14 AM

Login with username, password and session length
Members
  • Total Members: 3843
  • Latest: Tricky
Stats
  • Total Posts: 193479
  • Total Topics: 21088
  • Online today: 54
  • Online ever: 1035
  • (November 26, 2020, 04:45:12 AM)
Users Online
Users: 1
Guests: 50
Total: 51

Author Topic: F1 side menu navigation----my little gift to TP  (Read 30394 times)

0 Members and 1 Guest are viewing this topic.

SOcRatEs

  • Guest
F1 side menu navigation----my little gift to TP
« on: July 11, 2006, 02:10:37 PM »
Well I'm going to try and give back to the TP community.

(F1) side Navigation Menu Demo
 
Pressing (F1) on your keyboard will bring up a left side navigation menu.
(note: I have updated the links on demo site to sanitized generic)


Using DHTML goodies and some php tweaks from MKJsWorld

menu.php code:
Code: [Select]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Main Menu</title>
<style type="text/css">
/* START CSS only needed for this demo page */


#dhtmlgoodies_leftPanel ul{
padding-left:20px;
margin-left:0px;
}
#dhtmlgoodies_leftPanel div{
padding:0px;
}
#mainContent{
width:660px;
background-color:#FF0000;

padding-right:0px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;

}

/* END CSS ONLY NEEDED FOR THIS DEMO PAGE */

#dhtmlgoodies_leftPanel{ /* Styling the help panel */

background-color:#F4F4F4; /* Blue background color */
color:#000000; /* White text color */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Which font to use */
border:1px solid #000;
/* You shouldn't change these 5 options unless you need to */
height:100%;
left:0px;
z-index:10;
position:absolute;
display:none;
}

#dhtmlgoodies_leftPanel #leftPanelContent{
padding:0px;
}
#dhtmlgoodies_leftPanel .closeLink{ /* Layout of close link */
padding-left:2px;
padding-right:2px;
background-color:#FFF;
position:absolute;
top:2px;
right:2px;
border:1px solid #000;
color:#000;
font-size:0.8em;
}
#dhtmlgoodies_leftPanel .closeLink:hover{ /* Close link text  - mouseover effect*/
color:#FFF;
background-color:#000;
}

</style>
<script type="text/javascript">

/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005

Version 1.2: Updated, November 12th. 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/
var panelWidth = 125; // Width of help panel
var slideSpeed = 15; // Higher = quicker slide
var slideTimer = 10; // Lower = quicker slide
var slideActive = true; // Slide active ?
var initBodyMargin = 0; // Left or top margin of your <body> tag (left if panel is at the left, top if panel is on the top)
var pushMainContentOnSlide = false; // Push your main content to the right when sliding
var panelPosition = 0; // 0 = left , 1 = top

/* Don't change these values */
var slideLeftPanelObj=false;
var slideInProgress = false;
var startScrollPos = false;
var panelVisible = false;
function initSlideLeftPanel(expandOnly)
{
if(slideInProgress)return;
if(!slideLeftPanelObj){
if(document.getElementById('dhtmlgoodies_leftPanel')){ // Object exists in HTML code?
slideLeftPanelObj = document.getElementById('dhtmlgoodies_leftPanel');
if(panelPosition == 1)slideLeftPanelObj.style.width = '100%';
}else{ // Object doesn't exist -> Create <div> dynamically
slideLeftPanelObj = document.createElement('DIV');
slideLeftPanelObj.id = 'dhtmlgoodies_leftPanel';
slideLeftPanelObj.style.display='none';
document.body.appendChild(slideLeftPanelObj);
}

if(panelPosition == 1){
slideLeftPanelObj.style.top = "-" + panelWidth + 'px';
slideLeftPanelObj.style.left = '0px';
slideLeftPanelObj.style.height = panelWidth + 'px';
}else{
slideLeftPanelObj.style.left = "-" + panelWidth + 'px';
slideLeftPanelObj.style.top = '0px';
slideLeftPanelObj.style.width = panelWidth + 'px';
}


if(!document.all || navigator.userAgent.indexOf('Opera')>=0)slideLeftPanelObj.style.position = 'fixed';;
}

if(panelPosition == 0){
if(document.documentElement.clientHeight){
slideLeftPanelObj.style.height = document.documentElement.clientHeight + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.height = document.body.clientHeight + 'px';
}
var leftPos = slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;
}else{
if(document.documentElement.clientWidth){
slideLeftPanelObj.style.width = document.documentElement.clientWidth + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.width = document.body.clientWidth + 'px';
}
var leftPos = slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;


}
slideLeftPanelObj.style.display='block';

if(panelPosition==1)
startScrollPos = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
else
startScrollPos = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
if(leftPos<(0+startScrollPos)){
if(slideActive){
slideLeftPanel(slideSpeed);

}else{
document.body.style.marginLeft = panelWidth + 'px';
slideLeftPanelObj.style.left = '0px';
}
}else{
if(expandOnly)return;
if(slideActive){
slideLeftPanel(slideSpeed*-1);
}else{
if(panelPosition == 0){
if(pushMainContentOnSlide)document.body.style.marginLeft =  initBodyMargin + 'px';
slideLeftPanelObj.style.left = (panelWidth*-1) + 'px';
}else{
if(pushMainContentOnSlide)document.body.style.marginTop =  initBodyMargin + 'px';
slideLeftPanelObj.style.top = (panelWidth*-1) + 'px';
}
}
}

if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('Opera')<0){
window.onscroll = repositionHelpDiv;

repositionHelpDiv();
}
window.onresize = resizeLeftPanel;

}

function resizeLeftPanel()
{
if(panelPosition == 0){
if(document.documentElement.clientHeight){
slideLeftPanelObj.style.height = document.documentElement.clientHeight + 'px';
}else if(document.body.clientHeight){
slideLeftPanelObj.style.height = document.body.clientHeight + 'px';
}
}else{
if(document.documentElement.clientWidth){
slideLeftPanelObj.style.width = document.documentElement.clientWidth + 'px';
}else if(document.body.clientWidth){
slideLeftPanelObj.style.width = document.body.clientWidth + 'px';
}
}
}

function slideLeftPanel(slideSpeed){
slideInProgress =true;
var scrollValue = 0;
if(panelPosition==1)
var leftPos = slideLeftPanelObj.style.top.replace(/[^0-9\-]/g,'')/1;
else
var leftPos = slideLeftPanelObj.style.left.replace(/[^0-9\-]/g,'')/1;

leftPos+=slideSpeed;
okToSlide = true;
if(slideSpeed<0){
if(leftPos < ((panelWidth*-1) + startScrollPos)){
leftPos = (panelWidth*-1) + startScrollPos;
okToSlide=false;
}
}
if(slideSpeed>0){
if(leftPos > (0 + startScrollPos)){
leftPos = 0 + startScrollPos;
okToSlide = false;
}
}


if(panelPosition==0){
slideLeftPanelObj.style.left = leftPos + startScrollPos + 'px';
if(pushMainContentOnSlide)document.body.style.marginLeft = leftPos - startScrollPos + panelWidth + 'px';
}else{
slideLeftPanelObj.style.top = leftPos + 'px';
if(pushMainContentOnSlide)document.body.style.marginTop = leftPos - startScrollPos + panelWidth + 'px';

}
if(okToSlide)setTimeout('slideLeftPanel(' + slideSpeed + ')',slideTimer); else {
slideInProgress = false;
if(slideSpeed>0)panelVisible=true; else panelVisible = false;
}

}


function repositionHelpDiv()
{
if(panelPosition==0){
var maxValue = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
slideLeftPanelObj.style.top = maxValue;
}else{
var maxValue = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
slideLeftPanelObj.style.left = maxValue;
var maxTop = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(!slideInProgress)slideLeftPanelObj.style.top = (maxTop - (panelVisible?0:panelWidth)) + 'px';
}
}

function cancelEvent()
{
return false;
}
function keyboardShowLeftPanel()
{
initSlideLeftPanel();
return false;

}

function leftPanelKeyboardEvent(e)
{
if(document.all)return;

if(e.keyCode==112){
initSlideLeftPanel();
return false;
}
}

function setLeftPanelContent(text)
{
document.getElementById('leftPanelContent').innerHTML = text;
initSlideLeftPanel(true);

}
if(!document.all)document.documentElement.onkeypress = leftPanelKeyboardEvent;
document.documentElement.onhelp  = keyboardShowLeftPanel;

</script>

</head>

<body>
<!-- Code for the left panel -->
<div id="dhtmlgoodies_leftPanel">
<a class="closeLink" href="#" onclick="initSlideLeftPanel();return false">Close (F1)</a>

<!-- This is the menu links content -->
&nbsp;<div><br>

<b>

<a target="_top" href="index.php">Home</a></b><br>
<br>
<b>
Website</b><br>
<b>
<a target="_top" href="2.php">
.Contacts</a></b> <br>
<b>
<a target="_top" href="3.php">.About Us</a></b>
<br>
<a href="index.php"><b>.Home</b></a> <br>
<b>
<a target="_top" href="4.php">.Terms of Use</a></b><br>
<b>
<a target="_top" href="5.php">
.Prohibited Items</a></b>
<br>
<a target="_top" href="6.php">
.Afilliates</a></b><br>
<b>
<a target="_top" href="donate.php">.Donations</a><br>
<br>
Yard Sale Forum</b><br>
<a href="http://www.my-yardsale.com/smf/"><b>.Home</b></a> <br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=calendar">
.Calendar</a></b><br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=search">
.Forum Search</a></b>
<br>
<a href="http://www.my-yardsale.com/smf/index.php/index.php?action=profile"><b>.Profile</b></a> <br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=pm">
.Messages</a></b><br>
<b>
<a target="_top" href="http://www.my-yardsale.com/smf/index.php/index.php?action=help">.Help</a></b>
<b><br>
Site Links</b><br>
<b><a target="_top" href="http://www.my-yardsale.com/resouces.html">.Helpful Resources</a></b> <br>

<!-- End content -->
</div>
</div>
</body>

</html>

Install:

1. D/L menu.php

2. Edit "menu.php" link content to your desired links and url's (commented <!-- This is the menu links content -->line 286)

3. Save & U/l to to root of smf forum(example http://www.yoursite.com/smf/)

4. Edit your themes "index.template.php" & insert this include:
Code: [Select]
include( 'menu.php' );
into each of your themes "index.template.php" (can be done in forum/admin/current theme layout for single theme sites)
right below the <body> tag.

Save or save U/L the modded "index.template.php" and you are good to go!

I hope you find this useful!
Don't hesitate to ask any questions!

code for inserting text link to operate (F1) from a link on your website:
Code: [Select]
<div class="right">
<a title="Navigation Panel (F1)" style="cursor:pointer" href="#" onclick="initSlideLeftPanel();return false"><span class="smalltext">Side Panel Navigation <br>Press (F1) on your keyboard or <br>Click here</span></font></h1></a>
</div>

Menu2.php includes link icons from    
 YJ's Simple & Professional Menu with Icons.
« Last Edit: July 11, 2006, 03:48:19 PM by SOcRatEs »

Offline RoarinRow

  • Hero Member
  • *****
  • Posts: 1034
  • Ride my AV!
    • Avalanche Style
Re: F1 side menu navigation----my little gift to TP
« Reply #1 on: July 11, 2006, 03:15:45 PM »
That's different  :up:

SMF 2.0 RC3
TP 1.0 beta 5-1
Wordpress 3.0

SOcRatEs

  • Guest
Re: F1 side menu navigation----my little gift to TP
« Reply #2 on: July 11, 2006, 03:49:26 PM »
Updated demo site:
Theme colours and icons..................Thank you YJ!!!

Offline IchBin

  • Friends
  • *
  • Posts: 16231
Re: F1 side menu navigation----my little gift to TP
« Reply #3 on: July 11, 2006, 09:31:25 PM »
Looks good. Only thing I don't like is how it is squished to the left side of my browser window with IE and FF. It needs a little margin on the left side of the menu.

Xarcell

  • Guest
Re: F1 side menu navigation----my little gift to TP
« Reply #4 on: July 12, 2006, 12:35:37 PM »
Loosk good, I had no problems.

erikman

  • Guest
Re: F1 side menu navigation----my little gift to TP
« Reply #5 on: July 12, 2006, 01:32:57 PM »
wow...
need to try...

SOcRatEs

  • Guest
Re: F1 side menu navigation----my little gift to TP
« Reply #6 on: July 12, 2006, 01:38:27 PM »
Thank you!
I've made some fixes per IchBinâ„¢ suggestion.

I'm attempting to integrate this "alt_menu" into the slide menu.

I would love the function of both menu's twisted together..

MKJ will be joining us soon too.

Offline Crip

  • Jesus Inside.
  • Themes
  • *
  • Posts: 4168
  • Theme Support
    • Cripzone
Re: F1 side menu navigation----my little gift to TP
« Reply #7 on: July 12, 2006, 01:47:47 PM »
Thats very nice SOR --
thanks for sharing with us.

crip~ 8)
I have become comfortably numb!

Cripzone | Crip's Free 2.0.2 Themes


Offline IchBin

  • Friends
  • *
  • Posts: 16231
Re: F1 side menu navigation----my little gift to TP
« Reply #8 on: July 12, 2006, 02:10:21 PM »
Indeed, that looks much better IMO.

SOcRatEs

  • Guest
Re: F1 side menu navigation----my little gift to TP
« Reply #9 on: July 12, 2006, 02:13:11 PM »
The transparencies on the icons from YJ looks weird but I can fix that.