Printable View
Good Morning everyone.
I'm having trouble creating a drop down menu from a single button. I can create the nav buttons vertically no problem, but of course all the buttons for pages show. It's not a real drop down menu. I want viewers to click the 'menu' button then the drop down is revealed.
I've scoured my manuals but I'm missing something somewhere.
Many Thanks for your help.
-Bill-
Bill, you are effectively creating a NavBar with only one button; the sub-menu choices are where you add your page links.
Import a Xara template for a NavBar and edit it.
Untick Site Navigation Bar automatically links...
In the Button and Menu pane delete all but the Home button.
Click on the Home [+] sign to get to its sub-menu and add the detail and link for each page there.
Acorn
Hi bwood... I think you're wasting time with Xara's drop-down menu capabilities. They're too limited, and frustrated me for the longest time... So much so that it prompted me to do menus and drop-downs differently.
BTW... what Xara lacks in one way... makes up for it with its amazing ability to work-around and create your own thing...
Here is how I do what (I believe) you want to accomplish... I over did it a bit, for demo purposes....
1. Link to online example
2. The Xara file so you can see some of the possibilities and how the layers are ordered. Attachment 122875
Hopes this helps you some...
Cliff
Cliff - I really like that. Perhaps a little more control than the Xara drop down. I just refuse to use a template for this job -- and I learn a lot more.
Thanks Acorn. The manual indicates to 'tick' the site navigation. I think that was the problem.
Now of course its changing how the drop down menu actually looks, without changing the original button. I want a clear 'no color' background in the drop down and can't see to get one. Sheesh.
-Bill-
So I've got the navigation set up. But I want the navigation to go 'down' below the button. It's off to the side and vertical. I do want it vertical - but I'd rather not have it off to the right side. Must be a setting in 'edit navigation'
Thanks
Bill, in the sub-menu set-up there is a horizontal offset input box.Quote:
Originally Posted by bwood
Acorn
bwood....Quote:
Originally Posted by bwood
"perhaps a little more control" Really??? A thousand times more control. You must be missing something or just do not understand. Or I, just don't understand.
"refuse to use a template" Who used a template??? Where do you see a template???
"to go 'down' below the button" What am I missing? Are they not below the button?
"clear 'no color' background" Ok, back to the 'total' control' thing... Ok, no background. Easy...
Here's a look at your "below", "clear background".... and the position is placed... Wherever You Want It... (control)
http://mockupsites.xara.hosting/DROPDOWNBUTTONS/
I'm done with this one... that's all I got... :eek:
@cmpan1. I think Bill is wrestling with what Xara offers in its NavBars. Your approach is what I changed to when I realised the Xara NavBar approach was very limiting and your examples (especially the bounce effect on menu 2 is refreshing).
The problems I did find with it were of expansion into sub-sub-menus, rollover effects and mappings to smaller variants.
The approach then gets bogged down into getting Layers correctly named and its upkeep becomes quite time-consuming.
In the end, I copped out an typically revert to a pure CSS approach.
Acorn
Layers are the only way, especially for mobile variants. http://gwpriester.xara.hosting/layers-menu/index.htm
Create a layer, call it menu, or anything you want, add your buttons to that layer and link a menu button or hamburger to that layer.
Once my buttons were created on the Home page Menu layer, I
This gives you so much more flexibility and control.
Nice how would submenus work with this? Would it get hairy if there are many more pages and subpages?Quote:
Originally Posted by gwpriester
Gary, Acorn, and Cmpan1. Thank you all for the insight. Very much appreciated.
behzad, yes it does get hairy. You end up with a hierarchy of layers if you want roll-overs:Quote:
Originally Posted by behzad
- MouseDown pop-up n
- MouseOver pop-up n
- Pop-up layer n
- ...
- MouseDown pop-up 1
- MouseOver pop-up 1
- Pop-up layer 1
- MouseDown
- MouseOver
- Static layer n
- ...
- Static layer 2
- MouseOff
Acorn
WOW very hairy
Though for drop down menus, a MouseDown layer is overkill and as Siran reminded me, a MouseDown layer will cause a nav bar not to work in Firefox without adding a script.
I did this demo a long time ago using layers. It demonstrates the power of building your own menus on layers. http://gwpriester.com/menu-test/services_2.html
Nice work Gary. I'm going to have to brush up on my layers.
-Bill-
Cliff. The more I played with this the more I like it. Thank you from the dogs and cats with the Northeast SPCA. Appreciate it so much.
more than welcome bwood... glad I could contribute...Quote:
Originally Posted by bwood
Cliff. Just a newbie question. Im able to reproduce the drop down layer. I like this solution. The trouble I'm having is buttons. Your buttons are great. But my 'over' and 'off' states are not the same. So I'm really missing something there. I cant seem to simple change the look of a button, and make that reflected on another state. If I change the text on the button for example, it's not reflected on the 'down' state.Quote:
Originally Posted by cmpan1
bwood... I think I'm gettin' ya... you want to change the 'look' of the button... either the 'off', or the 'over'.Quote:
Originally Posted by bwood
First: As far as text is concerned... simply select the button... then select the 'text' tool and click on the button text to change it.... it WILL... reflect on the 'MouseOver' state.
Second: Button colors.... just select the button. Choose any color from the palette. When you do the 'Replace Color' window will appear... it will offer you a choice of the 'MouseOff' Color... the 'MouseOver' Color... and the 'Text Color'.... choose the one you wish. Simple...
And your terminology... "on the 'down' state"... there's no "down state" involved with this.
BTW... This will work on 'most' buttons.... for some you may have to 'show' the 'MouseOver' layer... then select the button box by holding down the Cntrol key to change the color.. then hide it again...
I know.... it is confusing... but that's XARA. A simple pop-up 'button options box' with all the possibilities would be nice.
This is an 'old' wysiwyg webbuilder... button/navbar dialog... but you get the point.... wouldn't it be nice.
Attachment 122926
Hi Cliff,
regarding the drop down menu in Xara I would like to ask you kindly the following:
I am wrestling with that problem two months, a few hours daily indeed; I red all available forums, etc. I still dont know if it is possible to create (through layers or in any other way) the vertical collapsible/expandable menu in Xara - for desktop and/or for mobile site.
Defacto I try to create the same menu as the Content Catalog in Xara Webdesigner Premium uses.
Please is there any way to create such a menu or I have to forget it resp. use any other software for my website? Thank you very much.
Danka
Welcome to TalkGraphics Danka
I am not clear. Do you want a vertical menu that has sub-menus that fly out to the right (or left)?
Danka...I believe that all answers to your questions above have been answered in this thread with multiple examples and explanations... have you not read it?Quote:
Originally Posted by Danka
Have you not downloaded files provide by me and Gary?
The answer is yes, you can create them with the manual 'layer' type method as I have demonstrated... and why I use that type... and others have shown and
explain what is part of the software menu features... both have advantages, and both have disadvantages...
I think there's even another thread close by here that is also a discussion on menus...
Other than that... that's all I got for you...
Cliff
I mean the same menu as Content Catalog uses in Xara, so sub-menus (after click) open down further sub-menus. And after another click again those sub-menus close. Look only how Content Catalog works in Xara.
I think that people call it expandable menu, in the direction down. I consider such a style of menu as a very useful/pretty/elegant, etc, especially for the mobile devices. But unfortunately Xara offers only menus which expand right or left by the vertical option menu. Am I right? However I am trying to find solution for that problem through placeholder and inserting html code for that kind of menu. Do you think that way is viable? Thanks.
Danka... you know what would be nice... helpful? Why don't you find a website that uses the type of menus you'd like to have... then the folks here can 'SEE'... exactly what you're talking about... then...Quote:
Originally Posted by Danka
you'll find out whether such a thing is possible or not... then... if possible, you can be shown how to create it....
Make sense? Otherwise this conversation will go round and round and never find the 'end'.
Cliff
And I forgot to mention that I read probably almost everything, it means discussions, advices, etc. about that theme. I am a person who reads and tries at first (like now two months) ...and very rare asks because I understand that it might be annoying.
Cliff, thank you for all your answers and advices.
I remember an example: www.mindmyhouse.com
I dont know the right name for the menu that this website uses, I thought vertical expandable/collapsible, but probably not right.
Thanks.
So what am I missing?... No 'drop-down' menus here...Quote:
Originally Posted by Danka
In the less wide view, the slide-in hamburger menu has a vertical accordion with the sub-menu text aligned under the top-level text that has an icon set left of the text.Quote:
Originally Posted by cmpan1
"mindmyhouse" uses pure CSS.
Xara's vertical NavBars only display sub-menus displaced left or right of the parent; the buttons do not accordion.
Acorn
As I said I am not sure about the right name; I am sure that I am looking for the menu style of that website.
I went through all templates in Context Catalog of Xara Premium, but I didnt find that menu style. On the other side Xara uses that style of menu in their Context Catalog...
I will try further and if I find solution for that menu style in Xara I will publish it because I am sure that I am not alone who look for that menu style. Thank you Cliff.
Acorn, thank you for your explanation. I just wanted to know whether it is possible to create it in Xara. If yes...how.
It is possible to create it in Xara, but not using Xara functionality. You need to switch to HTML & CSS coding.Quote:
Originally Posted by Danka
The simplest example I can make is here: Attachment 123024/
This is a pure lift from https://www.cssscript.com/simple-acc...3-transitions/, adding the code and links directly into a Placeholder.
As it is in a Placeholder, your actual links would all have to be added by hand as relative URLs.
It only goes to a sub-menu level. Sub-sub-menus are far harder to code in CSS3; look at https://www.cssscript.com/multilevel...lain-html-css/.
If you want to include icons on the left, you could use Font Awesome or the :before pseudo selector and a sprite file. For these latter, look at https://designmodo.com/css3-accordion-menu/.
I have found this generator useful in the past: https://designmodo.com/css3-accordion-menu/
Acorn
Acorn,
many thanks for all your advises. This is what I was looking for.
I started to work on it. It looks promising; I believe that I will reach a vertical accordion NavBar on my Xara website.
I also hope that Xara adds that style of menu in the future.
Danka