the css menu is not a problem

Oct 23, 2014

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.

Examples of vertical css menus

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

Download the latest version here.

Sep 10, 2014

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. 

Website Navigation Principles


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

Aug 4, 2014

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 webOptimize 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 fileSave your PDF as postscript file
Save your PDF as postscript fileSave your PDF as postscript file
Covert back to PDFCovert 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 PublisherFlip 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 SizeEdit => Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File SizePreferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File SizePreferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File SizePreferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File Size
Preferences => Convert to PDF => PostScript/EPS => Adobe PDF Settings - Smallest File SizePreferences => 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

Jul 28, 2014

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 <<


Jun 26, 2014

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 isbrief comparison of 6 popular CSS/HTML Menu Builders,

CSS Menu Maker vs Likno vs Easy CSS Menu vs CSS3menu vs OpenCube vs Swimbi
Visit the page.

Apr 15, 2014

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

Apr 9, 2014

New CSS Menu Builder website

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


Feb 5, 2014

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.

Feb 1, 2014

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

Jan 19, 2014

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


Jan 14, 2014

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

Jan 10, 2014

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-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){
}
}
</script>

Regards
Dmitry