Vertical Flyout CSS Menu in 2 clicks

In Swimbi ver. 1.3.0 you can convert any drop down menu into vertical menu.

Swimbi is a quite powerfull, but intuitive tool to create CSS menus for websites.

The latest updates allows to insert both horizontal drop down menu and vertical menu simultaneously.

Download the latest version here.

How to create best website navigation menu

If you don't want to lose potential clients by disorienting and confusing them, check your navigation for compliance with the key principles. 

Whether you create a new website or want to update existing one make sure to consider

22 Prinsiples Of Good Website Navigation and Usability

Simple way to optimize PDF files for web

Simple way to optimize PDF files for web

The post is not about CSS menu, but helpful for everyone who publish PDF documents online. PDFs are quite popular in the Web, but often used without any optimization. PDF file can contain huge images with masks, media files, fonts and unnecessary information. I have come across so often with huge PDF files, 100-200 Mb published online,
opening very slow in a browser. So I decided to write the post with the simple solution on how to optimize PDF easily and without losing quality.

PDF optimization, 10 times smaller, lossless compression

Optimize PDF file for web

You can find many detailed articles about creating smaller PDFs and optimization. It's very complicated. I know you are in hurry and don't need details. Quick and easy solution is always better.

Required software (it's free):

- Actobat Pro.

Acrobat 7.0 Pro - Free giveaway from Adobe - http://www.adobe.com/downloads/cs2_downloads/index.html
For Windows it can be downloaded separately, for Mac in the Creative Suite.

The trick is simple:

- Save your PDF as postscript file(.ps)
- Covert back to PDF.

(If you get errors try File=>Reduce File Size before saving in .ps format)

The process in images:

Save your PDF as postscript file
Save your PDF as postscript file
Covert back to PDF

The process fix many errors in PDF, if some other software require correct PDF file, e.g. flipping book PDF publication http://webstunning.com/pdf-publisher/ it's a perfect remedy for any problems with PDF.

Flip book PDF Publisher

Need more compression? (with some lose of quality)

- Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size

Edit => Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size

If you like to delve into the settings, use built-in PDF Optimizer in the Acrobat Pro. It has many options but resulting file size can be bigger. (Top menu => Advanced => PDF Optimizer)

Anyway the simple conversion PDF-PostScript-PDF works better for me usually.

Original article

Create an icon-based CSS drop down menu in few clicks

Add icons to your menu selecting them from a list. 450+ icons available.

Add mobile devices compatibility to your CSS menu with 1 click.
Responsive and touch screens compatible drop down css menu.
SWIMBI version 1.2.0 released.

Click here, to get >> The icon based CSS Menu Builder <<


Swimbi blog - CSS Menu Builders comparison

Of course CSS the perfect language for designing beautiful navigation menus. But what if you don't want to spend your time in learning and hand coding.

Fortunately there are many tools for CSS menu designing,

here is a brief comparison of 6 popular CSS/HTML Menu Builders,

Visit the page.

New Swimbi social page on Google+

We've started new social page blog on Google+

http://plus.google.com/+Swimbi_com/

Follow us on G+ to get latest news, updates and discounts.

Suggest new designs of drop down menus.

Learn new CSS features.

swimbi.com - The Swift Menu Builder

New CSS Menu Builder website

We are pleased to announce that f-source.com team launched new website for CSS Menu Builder - swimbi.com

Facebook page of the SWIMBI - Swift Menu builder

https://www.facebook.com/swimbi

Follow us on Facebook to get special discounts, latest news and updates.

Review the Swimbi app, share you ideas on how to improve the software.

Send us screenshots of new menu designs you would like to make in Swimbi.

HTML5/CSS Menu Creator on Chrome

Swimbi - Swift Menu Builder is now available on Chrome Web Store

Swimbi - CSS Menu Maker on Chrome Web Store

If your favorite browser is Google Chrome, you can create drop down menus right in your browser.

- Choose from 450+ icons.
- Select one of ready-to-use designs or create your own.
- Interactive "Welcome tour" helps to start easily
- Get a menu on your website in minutes

Absolute Widths on Menu Items

Hello,

First-off, nice rework conversion of your Flash variant! I really like this CSS version.

Two items, though, that I think you should consider:

1) The ability to have multiple tiers; i.e. 2 horizontal menus, instead of a single line.
2) The ability to select a preferred color for menu line separators.

One problem I am having, however, is with the need for absolute width menu items. This is posing a big problem for me, as I MUST have 2 tiers. I am stacking 2 instances of the same menu version (though with different URLs, of course) atop one another, and for continuity, I need the line separators and menu items to line-up from top-to-bottom. In other words, menu items which are together from the top and bottom should have the same widths, so that the line separators match each other.

Can you think of any way for me to do this; perhaps in the CSS/JS code?

Thanks in advance,

Answer:

Hi,

thanks for your advices.

Yes, you can do it in another CSS file or in HTML page style tag,

<style>

    #swimbi ul li a {

        width: 150px; // if you want to set equal width for all menu items

        

    }

</style>

or

<style>

    #swimbi ul li a {

       padding: 0px 28px !important; // if items width should depend on texts width

        

    }

</style>

PS

I don't recommend to edit the swimbi.css, because the Swimbi app rewrite the file each time you edit the menu.

Regards

Dmitry

f-source.com

Swimbi tutorials on Youtube

New tutorial video on youtube.com
How to insert Swimbi menu on a website. How to insert Swimbi drop down menu to a website

Search field?

Hey gang, just upgraded from the Flash to SWIMBI and the one thing I seem to be missing is the "search field" option. Thoughts? Thanks.

Answer:

Hi,

we will add the search feature in future version.

For now you are free to add any search field in the menu HTML code.

Example:

- replace the last button code with this

<li><a href="#"> <input id="search-input" name="search" type="text" > </a></li>

- add the following code after the Swimbi code

<!-- swimbi code end -->

<style>

#search-input{

width: 120px;

height: 22px;

padding-top:0px;

margin-top:0;

text-align:center;

display: inline-block;

border:1px solid #777;

border-radius: 5px;

background-image:url(http://f-source.com/img/searchLens22.png);

background-repeat:no-repeat;

background-position:left;outline:0;

box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);

text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);

}

</style>

<script type="text/javascript">

var searchInput = document.getElementById("search-input");

if(searchInput.value){

searchInput.style.backgroundImage = 'none';

}

searchInput.onclick = function(){

this.style.backgroundImage = 'none';

}

searchInput.onkeydown = function(){

if(event.keyCode == 13){

window.location.href='https://www.google.ru/search?sitesearch=yourdomainname.com&q='+this.value;

}

}

</script>

Regards

Dmitry

f-source.com

2014/1/5 <cio@houndcomics.com>