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>