Relative Positioning, CSS, Javascript

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:38

Relative Positioning, CSS, Javascript

Poster: minneapolis_dan
Dated: Thursday March 15 2007 - 16:35:47 GMT

I'm trying to use the listbased menu on my site, having a little trouble with positioning. If you look at my test page http://muralsyourway.com/2007/, you can see the Milonic dropdown menu at the bottom of the screen, because I took the absolute positioning out of the code. I need it to be a part of the main navigation, which you could see, without dropdowns, at http://muralsyourway.com/2007/template-home.html. The green bar is the main navigation.

I guess my question is first, can I position this dropdown in the flow of things, relative? How?

A second question would be, Can I style the dropdowns in CSS instead of in the Javascript?

I use listbased menus often, and style and position them in CSS. I bought the Milonic code for dropdowns and Flash compatability.

Poster: Ruth
Dated: Friday March 16 2007 - 17:56:11 GMT

Hi,

Just wanted you to know I'm working on it, we haven't just ignored you

You can design the whole menu in css if you want, using classes then use the offclass and onclass properties in the menu style. There's a basic page with some examples and a bit of explanation, the link to the examples is toward the bottom of the page. Though, if you are using the listmenu, there are a couple of posts about things for that

http://www.milonic.com/forum/viewtopic. ... 0111#40111

http://www.milonic.com/forum/viewtopic.php?p=39796

http://www.milonic.com/forum/viewtopic. ... 0504#40504

http://support.milonic.com/beginners/css_styling/

I'll post back when I have the other as to position, and yes you can set the menu relative, even the listmenu.

Ruth

Thanks, keep it coming!

Poster: minneapolis_dan
Dated: Friday March 16 2007 - 18:15:03 GMT

Thank you, I'll check out these links. Any additional info you have I will gladly accept as well.

Poster: Ruth
Dated: Saturday March 17 2007 - 0:18:47 GMT

Hi,

This is your page code, you'll have to change the path to point to your milonic files

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Wall Murals, Custom, Murals Your Way</title>
<link href="includes/myw-mainstyles.css" rel="stylesheet" type="text/css"  />
<link href="includes/myw-development.css" rel="stylesheet" type="text/css" />

<!--[if IE]>
<link href="includes/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="includes/insert_active_flash.js"></script>
</head>
<body>
<!--
    Milonic DHTML Website Navigation Menu Version 5.0+
    Copyright 2005 (c) Milonic Solutions Limited (UK). All Rights Reserved.
    Please visit http://www.milonic.com/ for more information.

    Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.       
    The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use. 
    
    Free, Commercial and Corporate Licenses are available from our website.
    You also need to include a link back to http://www.milonic.com/ if you use the free license.
    
    All Copyright notices MUST remain in place at ALL times. 
    This includes the first three lines of this notice on every page that uses the menu.
    If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
--><!--   ***** This is the section of code you need to paste into your web page *****-->
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</SCRIPT>

<SCRIPT src="listmenus.js" type=text/javascript></SCRIPT>
<div id="outerwrapper">

   <div id="mainwrapper">
      
      <div id="top">
      <h1 class="siteheader"><a href="/">Murals Your Way</a></h1>
      
      <div id="shopping-nav">
      <ul>
        <li id="myaccount" title="view your account"><a href="#">My Account</a></li>
        <li id="customerservice" title="get help"><a href="#">Customer Service</a></li>
        <li id="ordertracking" title="locate order status"><a href="#" >Order Tracking</a></li>
      </ul>
      
      <div id="search">
      <form id="searchform" name="form1" method="post" action="">
        <label>
        <input name="textfield" type="text" size="20" />
        <input name="Submit" type="submit" id="Submit" value="search" />
        </label>
      </form>
      </div>
      
      <p class="guarantee-text">100% Satisfaction Guaranteed </p>
      </div>
      <!--eof shopping-nav-->
      
      <p class="tollfree"><strong>Toll-free</strong>: 888-235-1318</p>


   <DIV id=site-nav>
<UL id=milonicmenu1>
  <LI ><A 
  href="http://muralsyourway.com/2007/#">Browse Murals</A> 
  <UL class=menuStyle2>
    <LI><A href="http://muralsyourway.com/2007/#">by Subject</A> 

    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by 
    Location</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by Artist</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Art Genre</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Decor Type</A> 

    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Season</A> 
    </LI></UL></LI>
  <LI id=promotions title="view special offers"><A 
  href="http://muralsyourway.com/2007/#">Current Promotions</A> 
  <UL class=menuStyle2>
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by Subject</A> 

    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by 
    Location</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by Artist</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Art Genre</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Decor Type</A> 

    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Season</A> 
    </LI></UL></LI>
  <LI id=examples title="see what others have done"><A 
  href="http://muralsyourway.com/2007/#">Customer Examples</A> 
  <UL class=menuStyle2>
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by Subject</A> 

    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by 
    Location</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">by Artist</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Art Genre</A> 
    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Decor Type</A> 

    <LI class=submenuli><A href="http://muralsyourway.com/2007/#">Season</A> 
    </LI></UL></LI>
  <LI id=faqs title="frequently asked questions"><A 
  href="http://muralsyourway.com/2007/#">FAQs/Questions</A> 
  <UL class=menuStyle2>
    <LI><A href="http://www.milonic.com/login.php">Login</A> 
    <LI><A href="http://www.milonic.com/mylicenses.php">My Licenses</A> 
    <LI><A href="http://www.milonic.com/myinvoices.php">My Invoices</A> 
    <LI><A href="http://www.milonic.com/support/">Make Support Request</A> 
    <LI><A href="http://www.milonic.com/support/">View Support Requests</A> 
    <LI><A href="http://www.milonic.com/mydetails.php">Your Details</A> 
  </LI></UL></LI><LI><A 
  href="http://muralsyourway.com/2007/template-home.html"><img src="shopping-cart2.gif" width="158" height="34" border="0"></A> 
  </LI></UL>

  <SCRIPT>
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
//bordercolor="#999999";
//borderstyle="solid";
//borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize=12;
fontstyle="normal";
//headerbgcolor="#ffffff";
//headercolor="#000000";
offbgcolor="";
offcolor="#ffffff";
onbgcolor="";
oncolor="#ffffff";
bgimage="itembg.gif";
overbgimage="itembg-over.gif";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#BED2CB";
separatorsize=1;
subimage="arrow-off.gif";
onsubimage="arrow-on.gif";
subimagepadding="4 8 2 6";
menubgcolor="";
menuheight=34;
itemheight=34;
menuwidth="100%";
itemwidth="100%";
}

with(menuStyle2=new mm_style()){
//bordercolor="#999999";
//borderstyle="solid";
//borderwidth=1;
bgimage="itembg-over.gif";
overbgimage="itembg.gif";
fontfamily="Verdana, Tahoma, Arial";
fontsize=11;
fontstyle="normal";
offbgcolor="";
offcolor="#ffffff";
onbgcolor="";
oncolor="#ffffff";
padding="6px"
itemwidth=158;
menuwidth=158;
}

// syntax: buildListMenu("id of list", "menu style name", "main menu properties")

buildListMenu("milonicmenu1","menuStyle","alwaysvisible=true;orientation='horizontal';position='relative';")



</SCRIPT></DIV><!--eof site-nav--></DIV><!--eof top-->
      
      <div id="content">
      
        <div id="animation">
         <script>
            myFlashObject=new Object
            myFlashObject.movie="images-template/myw-2007.swf"
            myFlashObject.quality="high"
            myFlashObject.wmode="transparent"
            myFlashObject.width=800
            myFlashObject.height=360
            myFlashObject.version="5,0,0,0"
            
            commitFlashObject(myFlashObject, "animation")
         </script>

        </div>
      
      </div><!--eof content-->
   </div><!--eof mainwrapper-->
   
   <div id="bottom">
      <div id="banners">
      <div id="designers-banner">
        <h4 class="bannertext">Designers & Architects</h4>
        <p>Log in or learn about our industry specials</p>
      </div>
      <div id="featured-on">
        <h4 class="bannertext">Our Murals Featured On</h4>
        <p align="center" class="bannertext"><img src="images-banners/media-logos.gif" alt="media" width="214" height="29" /></p>
      </div>
      <div id="inthenews">
        <img src="images-banners/news-cover.jpg" alt="news cover" width="63" height="71" /><h4 class="bannertext">In The News</h4>
        <p>Read the latest press about our wall murals.</p>
      </div>
      </div>
      <p class="bottomlinks"><strong>Company Info</strong>: 
      About Us  |  Contact  |  Guarantee  |  Designer Log In  |  Affiliate Program  |  Privacy Policy  |  Site Map</p>
   </div>
   
   <!--eof bottom-->

</div><!--eof outerwrapper-->

<div id="bottom-shadow"></div>

<div id="footer">
   <p>For Customer Service, Call Toll-Free 888-295-9764, 8am - 5pm CST<br />
     ©(years) Murals Your Way, Environmental Graphics, Inc. All Rights Reserved.</p>

</div>



</body>
</html>

This is the css coding changes I made. Up front I don't do much css so I have no idea about a lot of the things in there, these are just for the background image that goes in the nav div and that div has had the position:relative; removed because the menu is set as position='relative'; and when that is also in the div, the submenus open way down the page instead of under the menu.

Code:

#site-nav {
    padding-bottom: 0px;
   padding-top: 0px; 
   margin: 0px; 
   height: 34px
   background: #99b1a9 url(../images-template/navbar1.gif)  0 -34px;

   }

ul#mainnav {
   margin: 0;
   padding:0;
   height:34px;
   background: #99b1a9 url(../images-template/navbar1.gif)  0 -34px;

   }

And these are the images I made for the menu item BGs, the subimage and onsubimage. You'll see them in the menuStyle[s]

This is a transparent image so it looks terrible here, but looks like what you have when in the menu.

That seems to make it look like you want. There is no way to control individual item sizes, unless you can do it with css. As it is I set the menu to span the whole navbar, and used an image in the shopping cart one to show the cart and to make that item look like it is at the right like the original.

As to using css, there are properties in the menu called clickclass, offclass, onclass, and pageclass. I don't really use much css in the menu, but I do have some things like setting up specialized borders. These classes can be applied in the style section or you can use it in the item. Maybe you want one item to have something different as to padding or such, you could create a class for the off and on states of the item and apply the class in the item. One note to keep in mind, using border in css is equivalent to using offborder and onborder properties, not border. Border is a separate property that puts a border around the actual full menu, using css puts borders around each item.

Hope this helps.

Ruth

Wow, thanks

Poster: minneapolis_dan
Dated: Monday March 19 2007 - 14:32:55 GMT

You really go all out, I appreciate it so much. I'll try this out.

Industrial Strength JavaScript and DHTML Menus

Relative Positioning, CSS, Javascript

Thanks, keep it coming!

Wow, thanks