Moin!Moin!Moin!

14-16.09.2012

Introducing SupaFly®

The beginning ofa very specialfriendship

Let‘s have a look into the

past..

DHTML-Menus are ancient history

„OTTO“-Menus are also history

It‘s time forSupaFly!

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!

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

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!

Bringing it all together…Preparing the HTML-Template

Extending HMENU and other TS

Building SupaFly-Object (COA)

Some CSS-Styling

http://mallorca.cmstypo3.de

Feel free to contact me!sitegeist media solutions GmbH

Sven HuppachLeiter Qualitätsmanagement

huppach@sitegeist.de

Please have a look at the code snippetson the next pages.. :)

########## Just another 5-col BE-Layoutbackend_layout {

colCount = 5rowCount = 2rows {

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 = CONTENTcolspan = 5colPos = 0

}}

}}

}

TypoScript

########## Extending HMENUafter.cObject < lib.SupaFlyafterWrap = <div class="holder">|<span class="close"><!-- --></span></div>doNotLinkIt = 1

########## Adding SupaFly Layer to the corresponding pagetmp.getContent = CONTENTtmp.getContent { table = tt_content select { pidInList.field = uid orderBy = sorting languageField = sys_language_uid } stdWrap.required = 1 stdWrap.wrap =<div class="default">|</div>}

TypoScript

########## Get contents depending on chosen backend-layoutlib.SupaFly = COAlib.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> }

TypoScript

/* 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;}...

CSS

// 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');});

JS