PDA

View Full Version : Convert html dropdown navbar to Javascript



AudiTurbo
02-10-2011, 09:37 PM
I have a problem that seems to be a common one. I would like to have my navbar to be external so that i don't have to edit all the pages when i make changes. My server is Apache based? and they said it can't support php.

That being said, I'm not obviously not good with javascript, as I've been trying to make this work for 2 days. Can't use SSI.

I've made a separate html page with just the navbar html. I was able to load it via <Iframe> and <object> but in order to get the dropdowns, i need to reset the size which in turn pushes all the content down that much farther. I'd like the dropdowns to appear on top of the lower content. Could someone here convert this to a javascript code that will work? If there's a way to extend beyond the iframe borders,that would work too. Here's my navbar html. Any help is greatly appreciated.





<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
// -->
</script>
<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 120px;
background: #2e2e2d;
color: #a27314;
border: 1px solid #242422;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background: #000}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #000}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #A7732E;
color: #000;
font: 11px arial}

#sddm div a:hover
{ background: #000;
color: #fd8f00}
</style>



<!-- div class="sample" style="margin-bottom: 15px;height:42px;"><span -->
</p><ul id="sddm" style="width: 80%; margin: 0pt auto;">
<li><a href="/index.html" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>
<div style="visibility: hidden;" id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="">You should probably smile. It's good for your face.</a>
<a href="">Guaranteed you haven't seen a website like this.</a>
<a href="">No you haven't...not a professional one.</a>
<a href="dont_click_here.html">Whatever you do, don't click here to find out why.</a>
</div>
</li>
<li><a href="/business_building.html" onmouseover="mopen('m2')"

onmouseout="mclosetime()">Business Growth</a>
<div style="visibility: hidden;" id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Business Coaching Ultimate</a>
<a href="#">Coming Soon - Business Consulting Services</a>
<a href="#">Coming Soon - Emotional Response Training</a>
<a href="#">Coming Soon - Social Media Positioning</a>
</div>
</li>
<li><a href="/marketing.html" onmouseover="mopen('m3')" onmouseout="mclosetime()">Marketing</a>
<div style="visibility: hidden;" id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="emotional_response_marketing.html">Coming Soon - Emotional Response Marketing</a>
<a href="online_marketing.html">Coming Soon - Online Marketing</a>
</div>
</li>
<li><a href="" onmouseover="mopen('m4')" onmouseout="mclosetime()">Articles</a>
<div style="visibility: hidden;" id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="/articles/social_media_hype.html">Sick of the Social Media Hype? We are too</a>
<a href="/articles/thought_vibration.html">Thought Vibration</a>
<a href="/articles/social_media_marketing.html">Social Media Marketing - A New Business Era</a>
<a href="/articles/auto_leveling_brain.html">The Brain's Auto-leveling System</a>
<a href="/articles/success_the_game.html">Success - The Game</a>
<a href="/articles/meditation_brainwave_music.html">Meditation...And Music That Changes Things</a>
<a href="/articles/business_growth.html">Business Growth - Undoing the Death</a>
<a href="/articles/our_real_limitations.html">Our Real Limitations</a>
<a href="/articles/self_esteem.html">Self Esteem - A Call to Confidence</a>
<a href="/articles/love_two_realms.html">Love and the Two Realms</a>
<a href="/articles/overcoming_depression.html">Overcoming Depression - The Science</a>
<a href="/articles/depression_breaking_ninja.html">Depression - Breaking the Ninja's Grip</a>
<a href="/articles/reclaiming_achievement.html">Reclaiming Your Achievement</a>
<a href="/articles/becoming_success_setup.html">Becoming a Super Success - The Setup</a>
<a href="/articles/demanding_success.html">Overturning it all - Demanding Success</a>
<a href="/articles/success_vs_environment.html">Success vs. Environment</a>
<a href="/articles/science_of_success.html">Science of Success</a>
<a href="/articles/breaking_ninja_brain.html">Breaking the Ninja in Your Brain</a>
<a href="/articles/success_vs_economy.html">Success vs. Economy? What a Joke.</a>
<a href="/articles/calculated_failure.html">Calculated Failure</a>
<a href="/articles/power_of_gratitude.html">The Power of Gratitude</a>

</div>
</li>
<li><a href="/about_us.html" onmouseover="mopen('m5')" onmouseout="mclosetime()">About Us</a>
<div style="visibility: hidden;" id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

</div>
</li>
</ul>
<div style="clear: both;"></div>
<!-- /span></div -->