I am attempting to style a 3-level "nice menu" but between the themes and menu styles, I am having a hard time finding the correct styles to change. I am using firebug, but I cannot get the styles for some menu items, because moving the cursor over them changes them to hover (or focus). Unselected menu items are not displaying consistently at all levels the way I want and I cannot identify the styles without hovering on them. I need to find out what the full styling options are so that I can figure out what is affecting them.
2
-
Can't you just check the styleseet?– CyclonecodeCommented Dec 8, 2011 at 0:17
-
The problem is which one. I have found theme, local, skinr and nice menu css. My problem is that I cannot trace some styles back to the source and I am not able to get firebug to tell me without changing the source away from whatever is creating the problem. Its kind of like quantum physics, If you observe it, the results change. :)– AshlarCommented Dec 8, 2011 at 17:22
Add a comment
|
2 Answers
On the HTML tab of firebug there is a "break no mutate" button that will stop whatever javascript adds/changes HTML. This can be used to trap something that is a result of a nice menus change. It can be a little tricky as each hover initiates some javascript and then when you continue execution the break on mutate is turned off, but it gets easier with practice :)
-
OK, this is what I love about working with coding and its tools! I was running Firebug v1.8 and the option did not exist on the HTML dropdown, nor any other location I could find. So I changed to v1.9 and it still is not there. Your talking about the HTML drop down on the top menu bar in the firebug split screen, right?– AshlarCommented Dec 8, 2011 at 0:50
-
-
How would I step through? With the 'on mutate' button set, I can select the first menu level and the script stops. F8 does not continue opening the menu to the next level.– AshlarCommented Dec 8, 2011 at 1:43
-
1Yeah it might not work so well on the second mutate. All I can recommend is that the class are still there just have
display:noneset so you can still navigate to the menu items and see what other style is applied.– MalksCommented Dec 8, 2011 at 5:00
Mate...In nice menu when you hover the mouse over any list two things occurs...first of all the class of that element changes to :hover and after 1 second , a new class "over"is added to it using JQuery '.addClass("over")' function... so you need to do your css for that class...
li.over is the tag when mouse is over that tag.. li.menuparent ..is a tag who has sub list ul li...
CSS..(This Is the Css Tags I Have Used In My Project..)
ul.nice-menu ul { /*Css for sublinks*/
}
ul.nice-menu li ul li ul { /*css for the sublinks*/
}
ul.nice-menu li ul li.menuparent a,
ul.nice-menu li ul li.menuparent ul li.menuparent a /*css for setting the sublinks menu images*/
{
}
ul.nice-menu li ul li.menuparent ul li a ,
ul.nice-menu li ul li.menuparent ul li.menuparent li a /*css for unsetting the sublinks non-menu images*/
{
}
ul.nice-menu li ,
ul.nice-menu li.over,
ul.nice-menu-down li.menuparent,
ul.nice-menu-down li.menuparent.over,
ul.nice-menu-down li.menuparent:hover { /*changing background color of the main menu links*/
}
ul.nice-menu-down li li,
ul.nice-menu-down li li.over,
ul.nice-menu-down li li:hover,
ul.nice-menu-down li li.menuparent,
ul.nice-menu-down li li.menuparent.over,
ul.nice-menu-down li li.menuparent:hover /*drop down sub lists css (changing color and giving padding)*/
{
}
ul.nice-menu-down a /*css for the main menu links*/
{
}
ul.nice-menu-down .over a ,
ul.nice-menu-down a:hover {/*css for the main menu links on hover*/
}
ul.nice-menu-down .over a /*css for the main menu links to expanded lists*/
{
}
ul.nice-menu-down .menuparent ul a { /* to the dropdown sublinks*/
}
ul.nice-menu-down .menuparent ul li.first a { /* to the first link in drop down menu*/
}
ul.nice-menu-down .menuparent ul li.last a { /* to the last link in drop down menu*/
}
Hope this will help..
