Response title
This is preview!
Move this topic
Howto create jquery-ui menu horizontally
in Using jQuery UI
•
8 years ago
Hi,
I'm searching for a way to create a horizontal menu, with sub-menus open vertically, So it should look like most dektop menus. I thought this should be possible with the menu widget from jquery-ui, but i failed.
I tried also to find a hint inside this forum, but I could not find any.
I can not believe that I'm the first one. Any ideas, links or something else that could help me?
Thanks
Oliver
1
Replies(11)
Re: Howto create jquery-ui menu horizontally
8 years ago
It’s very possible with or without jQuery UI. What did you try?
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Howto create jquery-ui menu horizontally
8 years ago
Hi JΛ̊KE,
my actual version is
<script>
$(function() {
$( "#menu" ).menu();
$( "#menu" ).menu( "option", "position", { my: "left top", at: "right-150 top+30" } );
});
</script>
<style>
.ui-menu { width: 150px; }
.li {float: left; }
</style>
and my menu is defined as unordered list using ul and li. I could see my menu, it opens, but it has the wrong direction. I could not find a visible hint about how it should be done inside the jquery api documantation of the menu, but I'm not a professional so the reason may be the lack of my understanding.
Thanks
Oliver
Leave a comment on oliverdoerr's reply
Re: Howto create jquery-ui menu horizontally
8 years ago
Here’s one without jQuery UI. Mainly CSS. http://www.egrappler.com/multi-level-hierarchical-jquery-menu-jqsimplemenu/#post-917
The horizontal menubar has not made it into jQuery UI yet. I found https://github.com/jquery/jquery-ui/tree/menubar which is a branch off of an older version of jQuery UI. I’m sure current jQuery UI menu can turn vertical, but I haven’t found it.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Howto create jquery-ui menu horizontally
8 years ago
Hi JΛ̊KE,
sad news that the horizontal menubar has not made it into JQuery UI till now. So I'll have to search for a different solution or some type of tutorial so that I get the knowledge to do it on my own.
Thanks or the hint to the other menu, but this does not suffer my needs.
I'm searching for a simple menu without effects. It has to be able to be navigated not only by mouse. It should also possible to use it with the keyboard. So I thought entering the menu using tab, navigating with the arrow keys, choosing an entry using the enter key and escape quiting the menu again. The jquery UI menu looks perfect and the development demos were also perfect.
Thats the reason why I thought, that the horizontal menubar is now possible.
Thanks for your help
Oliver
Leave a comment on oliverdoerr's reply
Re: Howto create jquery-ui menu horizontally
8 years ago
Leave a comment on jakecigar's reply
Re: Howto create jquery-ui menu horizontally
8 years ago
Hi JΛ̊KE,
I'm a bit unsure, I think that it looks like a bit strange for a menu. It allows to open two sub-menus at the same time, which will not be accepted by the users. The keyboard interaction is not very intuitive.
So I think this is a better than nothing menu....
Thanks for your ideas / help
I never thought, that it will be so difficult to create a normal horizontal menubar, when I started this a long time ago...
Oliver
Leave a comment on oliverdoerr's reply
Re: Howto create jquery-ui menu horizontally
7 years ago
I have implemented a horizontal menu using jQuery UI menu. Here's a fiddle to illustrate my implementation:
http://jsfiddle.net/yRJ9g/
What I did was create a menu from scratch and style is as I wanted. I included the jquery and jquery ui scripts but did not use the jquery ui css. With a little bit of tinkering and using the position() property I was able to get it just right.
Leave a comment on arnab_bandyopadhyay's reply
Re: Howto create jquery-ui menu horizontally
7 years ago
This seems to do pretty good.
It would be helpful if you could comment your CSS so it would be clear what each does.
Really appreciate the work.
It would be helpful if you could comment your CSS so it would be clear what each does.
Really appreciate the work.
Leave a comment on gamcfarlane's reply
Re: Howto create jquery-ui menu horizontally
7 years ago
@arnab_bandyopadhyay this is nice. If you have no sub menus you don't even need the jQuery call. Thanks!
Leave a comment on Joe Johnston's reply
Re: Howto create jquery-ui menu horizontally
5 years ago
/* Clearfix for the menu */
.ui-menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}.ui-menu .ui-menu-item {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: auto;
}
Leave a comment on Marc Magon's reply
Re: Howto create jquery-ui menu horizontally
5 years ago
Hi Jake,
You can do this with some pretty simple css.
Please see my pen.
In a nutshell, make the first ui-menu-item display:inline,
and subsequent ui-menu-item display:block
Leave a comment on Andrew Oxenburgh's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to oliverdoerr's question
{"z61371319":[14737000006539525],"z61321324":[14737000006544273],"z26571421":[14737000004093012],"z27627295":[14737000004219127],"z25368878":[14737000003992518,14737000003994096,14737000003992827,14737000003992833],"z2950240":[14737000003991942,14737000003994098,14737000003994174],"z28615356":[14737000004326119]}
Statistics
- 11 Replies
- 101449 Views
- 2 Followers