By Squark
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 .
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
Teachertube - 06 Jun 2021 03:45
Mp3 and video player - 21 Oct 2016 12:48
Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
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!
yoooo it works
[[By CARTOON NETWORK]]
$best$