CODEWITHSUNDEEP
htmlcssgoogle-chromebutton
Hayk Saakian
Hayk Saakian

Reputation: 2036

google chrome like close button behavior in css

How would you replicate the behavior of tabs in google chrome with css?

one problem I'm having is with the close button (x)

cursory google searches say you shouldn't have a button inside an anchor, but if that's the case I don't know how to replicate the behavior.

Any ideas?

Upvotes: 1

Views: 1769

Answers (2)

bdrelling
bdrelling

Reputation: 840

I'm going to assume that you need two separate answers to your question:

  • How do you nest the element properly?
  • How do you perform the close action?

Let's start with nesting the elements. I chose to make my tabs in a ul and make each tab an li within that list. The close button is an a tag that is floated to the right inside the li.

<ul>
    <li>Tab 1 <a>x</a></li>
    <li>Tab 2 <a>x</a></li>
    <li>Tab 3 <a>x</a></li>
    <li>Tab 4 <a>x</a></li>
    <li>Tab 5 <a>x</a></li>
</ul>

(I highly recommend you give them all the appropriate classes for what you're trying to do, but for this case, I used the minimal amount of code to keep it clean and easy to read.)

Next up, we'll go into performing the close action with JavaScript.

I was able to create the following jsFiddle for you to demonstrate both of these points:

original jsFiddle

EDIT: revised jsFiddle

Essentially, the code works as follows:

$('a').click(function() {
    $(this).closest('li').animate({padding:0, margin:0, width: 0}, function () {  
        $(this).closest('li').hide();   
    });
});

When you click the a tag, which is what I've made the x button (similar to a chrome tab), it animates the list item (list of tabs, floated to the left) by changing the padding, margin, and width to 0.

Technically, since I set the li to border-box for the box-sizing, I don't have to have padding:0 in the animate function at all.

When animation is complete, I hide the list item entirely. (I could even remove it entirely at that point if I wanted to get rid of it, but I wanted you to see what I'm doing.)

Some additional takeaways:

  • You can have a click event on almost any item in jQuery, but certain mobile devices get finicky if they aren't a tags.
  • You're correct that you shouldn't put a button inside of an anchor tag, but putting two anchor tags or a button and an anchor tag into one list item is fine.

Everything else like setting the active tab and using a % as a max-width should be pretty obvious, but if you need more help or clarification, just let me know!

Upvotes: 1

Lucas Lazaro
Lucas Lazaro

Reputation: 1526

Here is one solution with no javascript code, only using css. Don't know if is the best solution but is certainly fun to know this kind of stuff exists.

Here is the Js Fiddle

HTML: (you should use <li> i guess is best for organising)

<div class="background" id="background">
    <i class="icon-home"></i>
    <div class="text">Tab name 
        <div class="close-button">
            <a href="#background" >x</a>
        </div>
    </div>
</div>

And then the CSS magic :

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

#background{ background-color:#d8d8d7; height:30px; opacity:1; display:table-cell; vertical-align:middle; transition: opacity .5s; -moz-transition: opacity .5s; /* Firefox 4 / -webkit-transition: opacity .5s; / Safari and Chrome / -o-transition: opacity .5s; / Opera */ }

#background:target{ opacity:0; }

.text{ display:inline-block; }

.close-button{ text-align:center; width:20px; height:20px; display:inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

.close-button:hover{ background-color:#ec8e92; }

.close-button:active{ background-color:#cc7d80; }

.close-button a{ text-decoration:none; color:#868687; }

.close-button a:hover{ color:#FFFFFF; }

Hope it helps, or at least opens your CSS horizons.

Cheers.

Upvotes: 1

Related Questions