G+

Swimbi app updated to v. 2.0.0

What's new:
- new patterns, submenu styles, round corners for any submenu.
- drop down menus with more forgiving mouse movement paths.
- main menu arrows indicating that an item has submenu (Icons tab => Submenu Indicator => Right Side Arrow).
- embed HTML into JS, embed HTML and CSS into JS (Publication tab => Source Code => Embed Source Code).
- optimized code for blogger.com.

New menu patterns

- position of arrows in submenu (Icons tab => Submenu Indicator => Top position).
- copy HTML to clipboard during publication (to enable Publication tab => Source Code => Copy HTML to Clipboard).
- title attribute for each menu item (shows up as tooltip in browser) (Navigation tab =>Title).
- UI usability improvements: two level drop down menu for skin selection, permanently saves the tree state, etc.


Demo of forgiving mouse movement paths in drop down menus



It's made by widening CSS boundaries with additional invisible elements. The extra space provide the forgiving hover-offs.

hidden css elements around drop down menus


Source code embedding options

new embedding options

There are 4 embedding options available:

  1. None (Standard). A page will contain the HTML code and links to "menu_files/swimbi.css" and "menu_files/swimbi.js". Optimal for speed and SEO.
  2. CSS and JS into HTML. Everything is inserted into a page HTML. Pros: 1. Good for blogger.com (and other platforms without file hosting). Cons: 1. CSS and JS are not cached by browser. 2. You are limited to standard icon set (if you don't upload "menu_files" folder which contains extra icons file).
  3. HTML into JS. HTML code is embedded into JS file. A page contains only links to "menu_files/swimbi.css" and "menu_files/swimbi.js". Pros: 1. CSS is cached by browsers. 2. No need to update HTML on every page when you add/remove a menu item. Cons: 1. HTML code may not be indexed by some search engines, therefore it's not so good for SEO
  4. HTML and CSS into JS. Everything is inserted into JS file, page contains only the link "menu_files/swimbi.js". Pros: 1. Easy to update a menu on all pages. 2. Easy to replace non-swimbi js-based menu. Cons: 1. CSS works faster and cached better in a separate file (choose previous option if possible)


Blogger.com optimized code

Since v.2.0.0 Swimbi produce a fully compatible code with blogger platform. Following options will save your time with it.

settings for blogger.com

  • Enable CSS minification
  • Choose embedding - CSS and JS into HTML
  • Enable automatic copy of the code to the clipboard during publication.
You can insert a Swimbi menu code into the special layout section. Which allows to edit your menu quickly and easily.

blogger layout section for swimbi menu

To create this section simply copy the code and insert into your blog template, right after the body tag.

  <b:section id='Swimbi-section' maxwidgets='1'>
    <b:widget id='HTML1' locked='true' title='Swimbi widget' type='HTML'>
      <b:includable id='main'>
        <data:content/>
        <br/>
        <b:include name='quickedit'/>
      </b:includable>
    </b:widget>
  </b:section>

OK, it's not so obvious, I think you need a detailed instructions on how to create a custom menu in Blogger.com.



Download the latest version

Stay informed:

like swimbi