Here are the slides of my session "Introducing SupaFly" given on Saturday, Sep 15 at the TYPO3camp Mallorca 2012.

1. Moin!
14-16.09.2012

2. Introducing
SupaFly®
The beginning of
a very special
friendship

3. Let‘s have a
look into the
past..

4. DHTML-Menus are ancient history

5. „OTTO“-Menus are also history

6. It‘s time for
SupaFly!

8. And wtf do we need this?
Users don‘t like to click
They like to see what they get – before the
decide where to click
Not every section of a website has the same
depth or a homogene structure
Click paths should be short and transparent
Better user experience
Tablets first!

9. Features of SupaFly®
Very flexible, e.g. 3, 4 or 5 columns
Can contain any kind of CE, e.g. text/image,
sitemap or plugin (form, maps, ..)
Fully controllable through editors
Easy to implement
Based on Backend-Layouts and TypoScript
No TemplaVoila needed 

10. Getting started…
Create different Backend-Layouts for each
Flyout-type (3-col, 4-col, …)
To avoid conflicts with rendering of default
content cols (normal, left, right, ..) set colPos
value up to … 100 +
Linking Backend-Layouts with your section
pages (Tab „Appearance“)
Page-type „shortcut“ is the best
Ready for content! 

11. Bringing it all together…
Preparing the HTML-Template
Extending HMENU and other TS
Building SupaFly-Object (COA)
Some CSS-Styling

http://mallorca.cmstypo3.de

12. Feel free to contact me!
sitegeist media solutions GmbH
Sven Huppach
Leiter Qualitätsmanagement
huppach@sitegeist.de
Please have a look at the code snippets
on the next pages.. :)

13. TypoScript
#########
# Just another 5-col BE-Layout
backend_layout {
colCount = 5
rowCount = 2
rows {
1{
columns {
1{
name = SUPAFLY 1 (15)
colPos = 109
}
2{
name = SUPAFLY 2 (15)
colPos = 110
}
3{
name = SUPAFLY 3 (40)
colPos = 111
}
4{
name = SUPAFLY 4 (15)
colPos = 112
}
5{
name = SUPAFLY 5 (15)
colPos = 113
}
}
}
2{
columns {
1{
name = CONTENT
colspan = 5
colPos = 0
}
}
}
}
}

14. TypoScript
#########
# Extending HMENU
after.cObject < lib.SupaFly
afterWrap = <div class="holder">|<span class="close"><!-- --></span></div>
doNotLinkIt = 1
#########
# Adding SupaFly Layer to the corresponding page
tmp.getContent = CONTENT
tmp.getContent {
table = tt_content
select {
pidInList.field = uid
orderBy = sorting
languageField = sys_language_uid
}
stdWrap.required = 1
stdWrap.wrap =<div class="default">|</div>
}

15. TypoScript
#########
# Get contents depending on chosen backend-layout
lib.SupaFly = COA
lib.SupaFly {
# Beginning at colPos 100
# 0-99 preserved for standard content columns
# 2 cols / formatting
100 < tmp.getContent
100.select.where = colPos=100
100.stdWrap.wrap = <div class="grid_6">|</div>
101 < tmp.getContent
101.select.where = colPos=101
101.stdWrap.wrap = <div class="grid_6">|</div>
# 3 cols / formatting
102 < tmp.getContent
102.select.where = colPos=102
102.stdWrap.wrap = <div class="grid_4">|</div>
103 < tmp.getContent
103.select.where = colPos=103
103.stdWrap.wrap = <div class="grid_4">|</div>
104 < tmp.getContent
104.select.where = colPos=104
104.stdWrap.wrap = <div class="grid_4">|</div>
...
# 5 cols / formatting
109 < tmp.getContent
109.select.where = colPos=109
109.stdWrap.wrap = <div class="grid_2">|</div>
110 < tmp.getContent
110.select.where = colPos=110
110.stdWrap.wrap = <div class="grid_2">|</div>
111 < tmp.getContent
111.select.where = colPos=111
111.stdWrap.wrap = <div class="grid_4">|</div>
112 < tmp.getContent
112.select.where = colPos=112
112.stdWrap.wrap = <div class="grid_2">|</div>
113 < tmp.getContent
113.select.where = colPos=113
113.stdWrap.wrap = <div class="grid_2">|</div>
}

16. CSS
/* supafly
----------------------------------------------- */
ul#mainnav li.tab {
color:#fff;
background:#666;
font-weight:bold;
text-decoration:none;
display:block;
float:left;
padding:0 1em;
height:2.4em;
line-height:2.5em;
}
ul#mainnav li.tab:hover,
ul#mainnav li.tab.sms_act {
background: #fff;
color: #666;
}
ul#mainnav li div.holder {
border-top: none;
left: -9999px;
margin: 0px 0 0;
color: #444;
font-weight: normal;
padding: 15px 0 10px 0;
position: absolute;
line-height: 150%;
top: 33px;
z-index: 10;
background: #ffffff;
-webkit-box-shadow: 0 3px 5px #666;
-moz-box-shadow: 0 3px 5px #666;
box-shadow: 0 3px 5px #666;
}
ul#mainnav li:hover div.holder,
ul#mainnav li a:hover div.holder {
left: 0px;
}
ul#mainnav li div.holder.act {
left: 0px;
}
...

17. JS
// Set all boxes to the same height
// including jQuery required :)
var max_height = 0;
$('.csc-frame-frame1').each(function(e) {
h = $(this).height();
if(typeof(h) != "undefined") {
if(h > max_height) {
max_height = h;
}
}
});
if(max_height > 0) {
$('.csc-frame-frame1').height(max_height);
}
// SupaFly open and close for tablets
$('#mainnav .tab').mouseenter(function(){
$('#mainnav .holder').css('left', '');
});
$('#mainnav .close').click(function(){
$('#mainnav .holder').css('left', '-9999px');
});