• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 333
  • Last Modified:

Trying to set width of a yui drop down menu in an html file

I'm trying to use this yui dropdown menu control:
http://developer.yahoo.com/yui/menu/

And I want to set the width.

Here's the code that I have:
 
<HTML>
<head>
  <!-- Standard reset, fonts and grids -->

        <link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/reset-fonts-grids/reset-fonts-grids.css">


        <!-- CSS for Menu -->

        <link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/menu/assets/skins/sam/menu.css">  
	
	
        <script type="text/javascript" src="http://developer.yahoo.com/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="http://developer.yahoo.com/yui/build/container/container_core.js"></script>


        <!-- Menu source file -->

        <script type="text/javascript" src="http://developer.yahoo.com/yui/build/menu/menu.js"></script>

  <script type="text/javascript">
/*
     Initialize and render the MenuBar when its elements are ready 
     to be scripted.
*/

YAHOO.util.Event.onContentReady("productsandservices", function () {

    /*
         Instantiate a MenuBar:  The first argument passed to the 
         constructor is the id of the element in the page 
         representing the MenuBar; the second is an object literal 
         of configuration properties.
    */

    var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { 
                                                autosubmenudisplay: true, 
                                                hidedelay: 750, 
                                                lazyload: true });

    /*
    Define an array of object literals, each containing 
    the data necessary to create a submenu.
    */

    var aSubmenuData = [

    {
       id: "communication", 
       itemdata: [ 
           { text: "360", url: "http://360.yahoo.com" },
           { text: "Alerts", url: "http://alerts.yahoo.com" },
           { text: "Avatars", url: "http://avatars.yahoo.com" },
           { text: "Groups", url: "http://groups.yahoo.com " },
           { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
           {
               text: "PIM", 
               submenu: { 
                           id: "pim", 
                           itemdata: [
                               { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                               { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                               { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                               { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                           ] 
                       }
           
           }, 
           { text: "Member Directory", url: "http://members.yahoo.com" },
           { text: "Messenger", url: "http://messenger.yahoo.com" },
           { text: "Mobile", url: "http://mobile.yahoo.com" },
           { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
       ]
    },

    {
       id: "shopping", 
       itemdata: [
           { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
           { text: "Autos", url: "http://autos.yahoo.com" },
           { text: "Classifieds", url: "http://classifieds.yahoo.com" },
           { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
           { text: "Real Estate", url: "http://realestate.yahoo.com" },
           { text: "Travel", url: "http://travel.yahoo.com" },
           { text: "Wallet", url: "http://wallet.yahoo.com" },
           { text: "Yellow Pages", url: "http://yp.yahoo.com" }                    
       ]    
    },

    {
       id: "entertainment", 
       itemdata: [
           { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
           { text: "Games", url: "http://games.yahoo.com" },
           { text: "Kids", url: "http://www.yahooligans.com" },
           { text: "Music", url: "http://music.yahoo.com" },
           { text: "Movies", url: "http://movies.yahoo.com" },
           { text: "Radio", url: "http://music.yahoo.com/launchcast" },
           { text: "Travel", url: "http://travel.yahoo.com" },
           { text: "TV", url: "http://tv.yahoo.com" }              
       ] 
    },

    {
       id: "information",
       itemdata: [
           { text: "Downloads", url: "http://downloads.yahoo.com" },
           { text: "Finance", url: "http://finance.yahoo.com" },
           { text: "Health", url: "http://health.yahoo.com" },
           { text: "Local", url: "http://local.yahoo.com" },
           { text: "Maps & Directions", url: "http://maps.yahoo.com" },
           { text: "My Yahoo!", url: "http://my.yahoo.com" },
           { text: "News", url: "http://news.yahoo.com" },
           { text: "Search", url: "http://search.yahoo.com" },
           { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
           { text: "Weather", url: "http://weather.yahoo.com" }
       ]
    }                    
    ];


    /*
    Subscribe to the "beforerender" event, adding a submenu 
    to each of the items in the MenuBar instance.
    */

    oMenuBar.subscribe("beforeRender", function () {

    if (this.getRoot() == this) {

       this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
       this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
       this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
       this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

    }

    });


    /*
    Call the "render" method with no arguments since the 
    markup for this MenuBar instance is already exists in 
    the page.
    */

    oMenuBar.render();  

});

</script>

</head>


<body class="yui-skin-sam" id="yahoo-com">

<div id="doc" class="yui-t1">
<div id="productsandservices" class="yuimenubar yuimenubarnav" width="100">
    <div width="30em" class="bd">
        <ul class="first-of-type">
            <li class="yuimenubaritem first-of-type">
                <a class="yuimenubaritemlabel" href="#communication">Communication</a>
            </li>
            <li class="yuimenubaritem">
                <a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
            </li>
            <li class="yuimenubaritem">
                <a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
            </li>
            <li class="yuimenubaritem">
                <a class="yuimenubaritemlabel" href="#">Information</a>
            </li>
        </ul>
    </div>
</div>
</div>



</BODY>
</HTML>

Open in new window


Theres a width property in this div:
<div id="productsandservices" class="yuimenubar yuimenubarnav" width="300">

But when I change that value there's no effect on the width of the menu.

I also tried setting the width in this div:
<div class="bd">

But that didn't have any effect either.
0
opike
Asked:
opike
  • 2
  • 2
2 Solutions
 
Jagadishwor DulalBraces MediaCommented:
In  your menu.css file line no 7 there is
.yuimenubar li, .yuimenu li {
    list-style-type: none;
}
use width property to increase the size of list
.yuimenubar li, .yuimenu li {
    list-style-type: none;
    width:100px;
}


0
 
Mark BradyCommented:
You cant just use width=300 to style a div. What you can do is override any width swet in the CSS. In taht div tag add "style="width:300px" and that will change just that div only to 300px wide. Notice the "px" after the width.
0
 
opikeAuthor Commented:
So any property specified in css always takes precedence over any property specifiied directly in a div tag?
0
 
opikeAuthor Commented:
Oops - ignore my last question, I didn't read the comments closely enough.
0
 
Mark BradyCommented:
Thanks for the points. No it's the other way around just for interest. Style info put into a div will take precedence over info in the css.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now