Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: jQuery menu bar problem  (Read 3197 times)

0 Members and 1 Guest are viewing this topic.

Typhoon

  • Guest
jQuery menu bar problem
« on: December 16, 2010, 04:05:44 AM »
Hello,

Im wondering if anyone would be able to help me. I've got a  jQuery menu bar and its coded in. but as my computer screen is big i need to find a way to make it good for an normal small screen.

Here is the CSS: hope it helps

/* menu::base */
#menu_container{
   
   margin:0 auto;
   width:auto;
   height:50px;   
}

#menu {
   left: 388px; top: 8px; width: 915px;
   width: 1140px;
    position:relative;
    z-index:100;
    height:32px;
}
#menu .menu {
   margin:auto;
   position:absolute;
   width: 1140px;
}
#menu * {
   margin:auto;
    list-style:none;
    border:0;
    padding:0;
    margin:0;
}
#menu a {
   margin:auto;
    display:block;
    padding:7px 14px 7px 14px;
    white-space:nowrap;
}
#menu li {
   margin:auto;
    float:left;
    background:#fff;
}
#menu li li {
   margin:auto;
    float:none;
    _border:1px solid #494949; /** fix for ie6 */
}
#menu div {
   margin:auto;
    visibility:hidden;
    position:absolute;
    background:url(images/pix.gif);
}
#menu div div {
    margin:-24px 0 0 -1px;
    left:100%;
}
#menu li:hover>div { visibility:visible; }

/* menu::special styles */
/* menu::level 1 */
#menu a {
    text-decoration:none;
    color:#fff;
    position:relative;
    z-index:77;
}
#menu a:hover {
    background:url(images/back.png);
    color:#6bb90d;
}
#menu a:hover span { color:#6bb90d; }
#menu>ul>li:hover>a {
    background:url(images/back.png);
    color:#6bb90d;
}
#menu>ul>li:hover>a span { color:#6bb90d; }
#menu span {
    text-transform:uppercase;
    font:14px 'Trebuchet MS', Arial, Helvetica, Sans-serif;
    color:#fff;
}
#menu li { background:none; }
/* menu::level >= 2 */
#menu li li a {
    padding:0;
    position:static;
}
#menu li li a:hover { background:#57ac3c; }
#menu li li a span { color:#fff; }
#menu li li a:hover span { color:#ffffff; }
#menu li li a.parent span { background:url(images/pointer.gif) no-repeat right 9px; _background-position:right 10px; }
*+html #menu li li a.parent span { background-position:right 10px; }
#menu li li span {
    display:block;
    text-transform:none;
    line-height:16px;
    padding:4px 25px 4px 14px;
    font-size:14px;
}
#menu li div { background:url(images/back.png); }
/** <fix for ie6> */
#menu div div {
    _margin-top:-25px;
    _background:#393939;
}
#menu li li li { _border:1px solid #393939; }
#menu div div div { _background:#292929; }
#menu li li li li { _border:1px solid #292929; }
/** </fix for ie6> */

rockerest



    Hopeful
    • Yes
  • Experience: Experienced
  • OS: Windows 7
Re: jQuery menu bar problem
« Reply #1 on: December 27, 2010, 12:14:17 AM »
Well, here's a big problem:

Trying to imagine what HTML looks like based on CSS is insane.  Especially when it has stuff like "#menu .menu".  Huh?
Posting the pertinent HTML would be excellent.

In lieu of HTML, it looks like the only thing explicitly defining the size of your menu is
Code: [Select]
#menu {
   left: 388px; top: 8px; width: 915px;
   width: 1140px;
    position:relative;
    z-index:100;
    height:32px;
}
#menu .menu {
   margin:auto;
   position:absolute;
   width: 1140px;
}

(width: 1140px)

Make that a bit smaller and it should work fine.  If it wraps, or does something funky, then I would imagine either: A) you have too many menu options or B) your font is set way too large.  However:
Code: [Select]
#menu span {
    text-transform:uppercase;
    font:14px 'Trebuchet MS', Arial, Helvetica, Sans-serif;
    color:#fff;
}

Makes it seem like you've got a fairly reasonable font size.

One last note for thought:
Using pixels is *typically* poor practice.  It locks a user into a look that you deem acceptable.  If they have their size set larger (for vision impaired, etc.), the changes won't take affect.  Using "ems" is a better idea.  It's not too hard to pick up on, and I highly recommend it.

Just google "design with em not px" to get some info.

Hope this helps,
-rockerest

p.s.
Pixels do have their place in many parts of web design, but for things like a nav bar, or other general sizes, ems are the way to go (even for absolute positioning! [which is not good practice either]).
In general, the PEBKAC.  Whether it's now or was three weeks ago, the PEBKAC.
Unsafe browsing and general computer / internet illiteracy IS the users problem.  Don't have sex if you don't know how to use a condom.
Also, there are 10 types of people in the world, those who understand binary, and those who don't.