- This topic is empty.
-
AuthorPosts
-
February 3, 2011 at 3:22 pm #31489Rob_HMember
Hello “CSS-Trickers”
I’m having a problem at the moment, i’m creating a website and i’ve used a Jquery menu script.(Which is working fine)
Now i want/need some code that can define the width of my ‘hyper’ link so my background of my menu would get the same width(or like 10px more). Is this possible?
*Sorry for my bad english*
Maby some screenshots would help to explain this problem :
It is something like this:
Before
and it should be like this:
After
CSS CODE:/* JQuery Menu */
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul#menu a {
display: block;
text-decoration: none;
}
ul#menu li {
margin-top: 1px;
}
ul#menu li a {
background-image: url('../img/js_menu/li_a.png');
background-repeat:repeat-x;
background-position: top left;
color: #000;
padding: 0.5em;
}
ul#menu li a:hover {
background-image: url('../img/js_menu/li_a_hover.png');
}
ul#menu li ul li a {
background: url('../img/niks.png');
color: #FFFFFF;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
/* End JQuery Menu*/Thank you for your time… :)
RobFebruary 3, 2011 at 3:35 pm #62863Rob_HMemberEDIT: Links updated.
February 3, 2011 at 3:43 pm #62865zeddotesMemberTry:
ul#menu li {
margin-top: 1px;
min-width: 50px;
}You can change the min-width to whatever you choose, I just picked an arbitrary number 50.
Edit: Woops, I read that wrong.
February 3, 2011 at 3:55 pm #62867Rob_HMemberDon’t have it live now.* I’m making it for a customer who didn’t like FLASH so i decided to make it in java with jquery* But here is the code
HTML:
Jquery:
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
Edit
Found a scrpt that does the trick, i only have to implement
Link
But how?=PFebruary 3, 2011 at 5:12 pm #62871Rob_HMemberHmm yea i understand that, but i can’t get it working!
February 3, 2011 at 5:42 pm #62875Rob_HMemberHmm, you can just copy paste the code’s into a html page and you’ve got it working.. I’m running the site on my localhost now so i cant show a live page, sorry!
February 3, 2011 at 6:00 pm #62877Rob_HMemberIts the same as this one only mine has other links.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.