ThemeShaper Forums » Thematic

[closed]

Expandable CSS button graphics in Superfish?

(8 posts)
  • Started 7 years ago by squidz
  • Latest reply from squidz
  • This topic is not resolved
  1. I've been looking at some methods to create glassy or curved corner buttons. Most of the method use at least two background images, one for the link and one for a <span> around the link text. (similar to this: http://wiki.mediamilan.com/index.php/2010/05/tutorial-on-creating-expandable-css-buttons-with-one-single-image/)

    However, the menu currently doesn't have a span around the link text to use for this method.

    Is there a simple way to inject such a span? Or, has anyone here implemented a different method using Thematic?

    Posted 7 years ago #
  2. lama
    Member

    I personally believe that adding html elements for styling purposes only is kind of wrong practice. You don't have to add a span, use list item and anchor instead.

    html (based on your example):

    <ul class="blue-btn">
       <li><a href="#" class="current">Home</a></li>
       <li><a href="#">About Us</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contact us</a></li>
    </ul>

    and corresponding css:

    /* BLUE TOP NAV */
    ul.blue-btn li {
    	display:inline;
    	float:left;
    	font-weight:bold;
    }
    
    /* *NOW FOR THE BUTTONS */
    ul.blue-btn li  {
    	background:url(../images/blue-bg.jpg) top left no-repeat;
    	padding-left:2px;
    	float:left;
    }
    
    ul.blue-btn li a  {
    	color:#FFF;
    	background:url(../images/blue-bg.jpg) top right no-repeat;
    	padding:8px 30px 9px 30px;
    	float:left;
    }
    
    /* BUTTON HOVER */
    ul.blue-btn li:hover {
    	background:url(../images/blue-bg.jpg) bottom left no-repeat;
    	cursor:pointer; /* FOR IE6 */
    }
    
    ul.blue-btn li:hover a {
    	background:url(../images/blue-bg.jpg) bottom right no-repeat;
    	cursor:pointer; /* FOR IE6 */
    }
    
    /* CURRENT SELECTION */
    ul.blue-btn li {
    	background:url(../images/blue-bg.jpg) bottom left no-repeat;
    	cursor:pointer; /* FOR IE6 */
    }
    
    ul.blue-btn li a.current {
    	background:url(../images/blue-bg.jpg) bottom right no-repeat;
    	cursor:pointer; /* FOR IE6 */
    }

    There is only one drawback to this solution - it won't work in IE6, since it only supports :hover pseudo-selector for anchor elements. If you care for IE6, use your favourite search engine to find whatever:hover, component allowing anything to be hovered in IE6.

    Posted 7 years ago #
  3. Very cool lama! I appreciate that a lot. I had pondered whether the li could just be used but had not attempted or seen that method used in the tutorials I'd reviewed. I will try it out.

    Regarding IE6...man, I wish I could totally forget about it. In most cases clients are fine with non-support. But some have viewer bases that are stuck in archaic systems that they cannot upgrade on their own.

    Interestingly, I was pointed to a Microsoft sponsored sight that promoting the industry and web users to push IE6 off the usage map. That's what I like to see! Link: http://ie6countdown.com/ Ironically, one of the most tech/gadget savvy countries (S. Korea) maintains the one of the heaviest IE6 user base in the world, along with China.

    Posted 7 years ago #
  4. Well, I've been working on this off and on since I posted here. I cannot get any of the sliding door techniques to work with the superfish menu using only the existing anchor and li tags.

    Does anyone have a tested technique to create expandable buttons, including those that use curved corner background images, with Thematic and without injecting spans around the link text? The use of span seems to be very common, but I was trying to do it clean as lama had suggested.

    I can accomplish setting the initial button and a current button. But the hover breaks every time.

    I can get it to work reasonably well in Chrome but Firefox reacts oddly on hover and the style below in the deafult.css will kill off override my styles:

    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background: #fafafa;
    outline: 0;
    border-bottom-color:#ccc;
    }

    No matter what I do, even copying this into my css and changing the background to an image, it will kill it.

    Posted 7 years ago #
  5. Here is a sample: http://50.22.42.91/~ameraff/

    Seems to work well in Chrome and Safari, hover and current broken in Firefox, and I believe there may be some IE problems.

    Posted 7 years ago #
  6. You can force overrides with "!important"

    background: url("images/btn_lft.png") no-repeat left top !important;

    Posted 7 years ago #
  7. lama
    Member

    Never, but never ever use !important. In 99 cases out of 100 it is an excuse to write lousy css :)

    squidz, you've made a tiny little mistake. You can specify background-position property either by a keyword or by setting x y position in px/%, you cannot use both at the same time.

    Oh, and why would you want to move background picture horizontally? ;)

    Your code (I removed cursor and comments for clarity):

    .sf-menu li:hover{background:url(images/btn_rgt.png) no-repeat -43px right;}
    .sf-menu li:hover a {background:url(images/btn_lft.png) no-repeat -43px left;}

    Your code - slightly altered:

    .sf-menu li:hover{background:url(images/btn_rgt.png) no-repeat 100% -43px;}
    .sf-menu li:hover a {background:url(images/btn_lft.png) no-repeat 0% -43px;}

    Luckily we're allowed to mix px's and percentages when determining background position, so left/right is not a problem. Also 'transparent' is an initial default value, you don't really need it here.

    I haven't tested it thoroughly but it should work. Hope it helps :)

    Posted 7 years ago #
  8. Cool lama, will try it. I didn't think I was moving it horiz. The top corners of the two bg pieces are curved. The li was to be in the top/right and the anchor top/left. I'll reconfig a bit and see if FF and IE will get it.

    I appreciate the input a lot!

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.