Discussion on Tilt, 3D Tile Based Responsive Navigation Plugin

pqina

pqina supports this item

Supported

This author's response time can be up to 1 business day.

15 comments found.

Beautiful ! Bookmarked !

Thanks! :-)

Wow nice script :D GLWS

Thankyou sir!

Congrats, it looks great! Good luck with sales.

Thank you, nice to hear! :)

Can I integrate it in wordpress?

I am not familiar with the inner workings of WordPress. You could always include it as HTML on a content/article page I think.

dittotharappel -did you ever figure out if this works w/ Wordpress w/o major coding?

Hi, I like the script. its is great. Now i was wondering how do i make it have only two column tiles with text ? irrespective of the device size, it always has only two columns. if practical please tell me how. thanks and look forward to hearing from you.

Hi Rik, am still waiting for your response. help is highly appreciated

See my reply below :-) Somehow got separated from this thread.

Thanks! it works.

Hi Jopima, I’m sorry it took me so long to get back to you.

Setup the HTML like shown and add the CSS to your stylesheet. I’ve quickly tested this on Chrome and Firefox, it should work on other browsers too, should you run into trouble let me know.

HTML

<ul class="tilt-set tilt-set-alpha">
    <li><span class="tilt tilt-tile"><span>Foo</span></span>
    <li><span class="tilt tilt-tile"><span>Bar</span></span>
    <li><span class="tilt tilt-tile"><span>Foo</span></span>
    <li><span class="tilt tilt-tile"><span>Bar</span></span>
</ul>

CSS

.tilt-set-alpha>li {
    position:relative;
    width:50%;
    padding-bottom: 50%;
}

.tilt-set-alpha>li>span {
    position:absolute;
    width:auto;
    height:auto;
    right:.25em;
    left:.25em;
    top:.25em;
    bottom:.25em;
}

It’s now best to use the ‘fill’ solution as described in the docs.

Hi,

Like jopima I have a percentage based grid too, mine is 6 columns and when I try to use your codes I get some odd result. Also, my grid wont have any paddings/margins between eachother.

Here the code I’m using: HTML: http://d.pr/i/DWed CSS: http://d.pr/i/Frho Result: http://d.pr/i/FORE

I included tilt.min.js and tilt.min.css

Thanks.

Hi again,

When will you release the next update, need effects on grid.

Thanks.

I understand. It needs a little bit more testing before release also I’m currently not able to work on it as often as I would like, I apologise for the delay.

The latest update features custom grid animations.

Hi, Its seems it dosent work on android devices. Anyone else has the same problem?

(iOS & Windows Phone 8 works ok)

Thanks

Tested with Nexus 10 (Android 4.4) Works only version 1.2.2

I am waiting for the new version!

Thanks for testing! Glad to hear its working :)

I’ve just uploaded version 1.2.2. Envato will send you an email once it has been approved.

New version deployed! Everything works fine now! Thank you.

Hi,

Can I add other HTML in tiles rather than a title?

Thanks

You can, but you’ll have to do some custom styling, also, you might have to reset some default Tilt styles.

thank for good navigation.

I want to allign by vertical. this is my site. http://nymagic.cafe24.com/index.html

plz. teach me vertical allignment.

If I understand correctly you want a more compact tile placement. To achieve that you can change the width of the parent container.

The following CSS code should do that.

div.live {max-width:400px !important;}

sorry.. my question is vertical alignment in browser. I place metro menu in vertical center in brower. Now metro menu is place in horizontal center but is not pace in vertical center. I want to place metro menu in vertical center.

Aha, there’s an extensive guide on vertical centering to be found on CSS Tricks. http://css-tricks.com/centering-css-complete-guide/

In your case I think you have to add height:100%; to the .demo and .live elements add the following snippet to the tilt grid.

ul.tilt-grid { top:50%; margin-top:-180px; }

Hey, nice item!

Is it possible to change the size of the tiles as example i want to get them 2x bigger then the “l” in the grid.

Regards

Hi! Currently the data-tile-size="l" setting is the biggest available.

If you want bigger tiles you could use the Fill setting with a custom grid. http://rikschennink.nl/products/tilt/1.2.2/docs.html#topic-fill

I’ll see if I can add more flexibility in a future release.

i wish to buy this now, but wondering can it be used just as html and css, without javascript

Unfortunately not, the functionality in Tilt requires JavaScript.

Purchased this, but in firefox all links are not clickable

I’ve uploaded a fix. If you contact me using the Support tab I’ll send it to you over email. https://codecanyon.net/item/tilt-3d-metro-navigation/6718568/support

Just sent the message thanks

The files are on the way :-)

Fantastic ;)

Thanks! :)

by
by
by
by
by
by