Collapsible Block Unleashed

By SquarkSquark

Description

With the collapsible block you can create VERY custom menu on your site. It is not very easy to do it, but with a bit of effort it's eatable.
I had to change my CSS style a bit to make it works (change margins of <ul> lists for example), but it can be done by adding 12px padding in the internal DIV (because bullet list has 12px margin by default).

If you know CSS styles a bit, you will be able to do such menus or even better!

Code

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼                       posts by date                         " hide=" ▼                       posts by date                          "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module PageCalendar category="blog" targetPage="start"]]
[[/div]]
[[/collapsible]]
[[/div]]

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼                    my current status                     " hide=" ▼                    my current status                     " folded="no"]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://twitter.com/statuses/user_timeline/16363190.rss" limit="3"]]
[[div]]
[[div style="width:278; height: 34px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_1.png); margin: 0; padding: 0;"]]
[[/div]]
[[div style="width:278; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_2.png); margin:0; padding: 10px 30px;"]]
[[div style="background-color: #444; line-height: 12px;"]]
[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[/size]]%%description:";squark:;":"":";http://([^ ]+);":"<a href="${0}">${1}</a>"%%
[[/div]]
[[/div]]
[[div style="width:278; height: 73px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_3.png); margin:0; padding: 0;"]]
[[/div]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼                     recently listened                     " hide=" ▼                     recently listened                     "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://ws.audioscrobbler.com/1.0/user/squark/recenttracks.rss" limit="10"]]
[[div style="line-height: 12px;"]]
[[size small]]%%custom title%%[[/size]]
[[size x-small]]##gray|%%custom pubDate%%##[[/size]]
[[/div]]
[[/module]]
**[*http://www.lastfm.pl/user/squark visit my last.fm profile >>]**
[[/div]]
[[/collapsible]]
[[/div]]

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼                  wikidot team status                     " hide=" ▼                  wikidot team status                     "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://twitter.com/statuses/user_timeline/6130662.rss" limit="3"]]
[[div]]
[[div style="width:278; height: 34px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_1.png); margin: 0; padding: 0;"]]
[[/div]]
[[div style="width:278; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_2.png); margin:0; padding: 10px 30px;"]]
[[div style="background-color: #444; line-height: 12px;"]]
[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[/size]]
%%description:";squark:;":"":";http://([^ ]+);":"<a href="${0}">${1}</a>"%%
[[/div]]
[[/div]]
[[div style="width:278; height: 73px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_3.png); margin:0; padding: 0;"]]
[[/div]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼                      posts by tags                     " hide=" ▼                      posts by tags                     "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module TagCloud minFontSize="1em" maxFontSize="2em" maxColor="187,228,255" minColor="35,110,145" category="blog" target="blog:_start"]]
[[/div]]
[[/collapsible]]
[[/div]]

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼                 Michal's latest posts                     " hide=" ▼                 Michal's latest posts                     "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://michalfrackowiak.com/feed/pages/category/blog/t/Michal+Frackowiak%27s+blog" limit="5"]]
[[div style="line-height: 12px;"]]
**%%linked_title%%**
[[size x-small]]%%date%%[[/size]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼                  Gabrys latest posts                     " hide=" ▼                  Gabry's latest posts                     "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://piotr.gabryjeluk.pl/feed/pages/category/dev/t/Piotr+Gabryjeluk+dev+blog" limit="5"]]
[[div style="line-height: 12px;"]]
**%%linked_title%%**
[[size x-small]]%%date%%[[/size]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]

In action

I'm sorry about different colours — different CSS style. You can look at the fully working example at my page: http://www.squark.pl .

{"module":"feed\/FeedModule","params":{"src":"http:\/\/twitter.com\/statuses\/user_timeline\/16363190.rss","limit":"3","module_body":"[[div]]\n[[div style=\"width:278; height: 34px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_1.png); margin: 0; padding: 0;\"]]\n[[\/div]]\n[[div style=\"width:278; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_2.png); margin:0; padding: 10px 30px;\"]]\n[[div style=\"background-color: #444; line-height: 12px;\"]]\n[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[\/size]]%%description:\";squark:;\":\"\":\";http:\/\/([^ ]+);\":\"<a href=\"${0}\">${1}<\/a>\"%%\n[[\/div]]\n[[\/div]]\n[[div style=\"width:278; height: 73px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_3.png); margin:0; padding: 0;\"]]\n[[\/div]]\n[[\/div]]"}}

Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Squark

Mp3 and video player - 21 Oct 2016 12:48
Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
Teachertube - 16 Feb 2012 01:46
Slideboom - 16 Feb 2012 01:42
Schooltube - 16 Feb 2012 01:40
Reflections - 16 Feb 2012 01:39
Playlist - 16 Feb 2012 01:31
Picasaweb - 16 Feb 2012 01:30
Ohloh - 16 Feb 2012 01:27
Js Kit Ratings - 16 Feb 2012 01:15
Gametrailers - 16 Feb 2012 01:03
Flickr Video - 16 Feb 2012 01:01
Dailymotion - 15 Feb 2012 00:42
Blip TV - 15 Feb 2012 00:26


Rate this solution

If you think this solution is useful — rate it up!

rating: +28+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License