Can you add a dropdown, flyout effect to an existing Nav Bar?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I'm not asking for anyone to do this for me, just point me in the right direction for a tutorial/directions. I have a great nav bar but now I am at a point it is time to add some pages to my "Oregon or Bust". I would like to know how to build a dropdown of 4 boxes, in a tan or light brown, just something that blends well with my colors? I would also love to have a flyout effect from each of those dropdowns but if I can't get that, I will settle for just a dropdown code. I know there are codes all over the web, including Yola codesite but, I don't know how to implement one using my nav bar that is already created? I am hoping this is possible.

Thank you in advance for anyone that can help. My site is fromheretoeden.com and you can see the button I am talking about. Denise:)
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
  • wondering and hoping:)

Posted 9 years ago

  • 1
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
what did you use to create your menu,images or coding?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Denise...

Please take a look here: http://littleustestsite.yolasite.com/...

Is this what you're after? Hover over the "oregon or bust".
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Yessssssssssss!! That will work fine littleus, but again, you made it for me. I would sure love to have the directions you used. Did you use a site or just what you have in the testsite here? If it's here I don't get along with the testsite so nevermind, LOL!!! That will work perfectly though and thank you sooooooooo much!! Denise PS are you going to send me the code?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
It's a little complicated.. but I'm sure that you will be able to get it running. Please try this on a testpage first to see how it interacts with your other widgets. You can do "save page as" and give this a new name and then try this out.

So.. here are the steps:

Step 1:Place this code into an HTML widget (this is for your fade effect)

<style type="text/css"> a.linkopacity img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;} a.linkopacity:hover img { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;} </style>

Step 2: Place the code below into an HTML widget

<style type="text/css">

#sddm
{ margin: 0;
padding: 0px;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: normal 18px Arial}

#sddm li a
{ display: block;
margin: 0 0px 0 0;
padding: 0px 0px;
width: 175px;
height: 37px;
background: url(http://fromheretoeden.com/resources/N...;
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:active
{ background-color:#5dc4d3}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #c98e40;
border: 0px solid #CCCCCC}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 3px;
width: 168px;
height: 20px;
white-space: nowrap;
text-align: Center;
text-decoration: none;
background: #ffdc9e;
color: #7d654c;
font: 12px verdana}

#sddm div a:hover
{ background: #c98e40;
color: #FFFFFF}

</style>

Step 3: Place the code below into another HTML box

<script type="text/javascript">

// Copyright 2006-2007 javascript-array.com

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>

Step 4: This is the part that gets a little tricky! Now drag a 2 column widget over. Then, drag an HTML widget over and place into the left hand column. Paste this code into the HTML widget:
<div align=center><a class="linkopacity" href="http://fromheretoeden.com/index.php&q...; <img src="http://fromheretoeden.com/resources/N...; border="0"</a> </div>

- Drag the green middle bar as far over to the left as you can - it'll stop when it can't go any further.

Step 5:Now drag another HTML widget over and place into the right-hand column and paste in this code:
<ul id="sddm"> <li><a class="linkopacity" href="nogo#" onmouseover="mopen('m7')" onmouseout="mclosetime()"></a> <div id="m7"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"> <a href="http://yolacodes.yolasite.com/blog&qu...; <a href="http://yolacodes.yolasite.com/links&q...; <a href="http://yolacodes.yolasite.com/contact...; <a href="http://yolacodes.yolasite.com/rules&q...; </li> </ul> &nbsp; <a class="linkopacity" href="http://fromheretoeden.com/store.php&q...; <img src="http://fromheretoeden.com/resources/N...; border="0"</a> &nbsp; <a class="linkopacity" href="http://fromheretoeden.com/spit.php&qu...; <img src="http://fromheretoeden.com/resources/N...; border="0"</a> &nbsp; <a class="linkopacity" href="http://fromheretoeden.com/email.php&q...; <img src="http://fromheretoeden.com/resources/N...; border="0"</a>

You will see that it looks funny in the site builder. This is probably what you'll see:



But it'll be fine in the published version.

That's it! =) Now... I could not get the fade effect to work on that Oregon & Bust button. Sorry! But, it'll work for all your other buttons.

I hope this made sense. As always, let me know if I need to clarify anything.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi little, I am not ready to tackle this today but I did want to ask you if I need to remove my old code for my Nav Bar(buttons) before I embed yours? Maybe dumb question but I don't see you telling me to do that in your instructions but thought I had better ask and know for sure first;) ty ty, denise
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Denise

yes... you would need to take out your old code. Do "save page as" and give this a name. Then, you can try the dropdown code on this page. If all goes well, then you can simply rename this page to the original one and it will overwrite it. If this page doesn't work, then you can delete it and you'll still have the original one intact.
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Hello Denise....What type of items do you plan on selling in your general store?
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Hi John, travel accessories:) And for activities like fishing, fishing poles equipment etc.:) Even travel games kids can play. Those are just a few ideas I have so far:) Denise
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
OK....Nothing I can relate to my furniture site and provide a link to you...I can add your link to my directory site though to help get you started....If you would like that let me know here what you would like for a link title and description.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
That is so thoughtful of you John. I have thought about some of my friends and wanting to place their links on my site. I had thought about just having a section for "My Fave Links". Don't you think that would be ok? I was planning on doing that and I would be glad to add your link to there with a little image maybe or Logo?? Let me know John. Denise:)
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Link building is one of the best ways to promote your site.All the search engines are stressing more and more that links need to relate to help you with rankings.Many unrelated links will harm your ranking....Here is a link to my main site http://kanthaidecor.com/Reciprocal-Li... where I have my link information along with a form so others can request an exchange......Take a look if you like to maybe give you an idea of setting something up on your site (when you are ready) to get other site owners with related sites to link to you.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
Oh, I really appreciate that info John. I didn't realize it could do harm. I am just learning about Affiliate Marketing. I don't know anything about having my own product either. But someday I may discover something of my own to market:) Thank you for the help and the link. I will certainly take a look:) denise
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
I read this forum every day and learn things almost every time....Even from people just starting out....A good idea is a good idea I don't care where it comes from.
Photo of Denise

Denise

  • 393 Posts
  • 3 Reply Likes
I totally agree John:) see you tomorrow, Denise