Simple navigation menus?

User 2912214 Photo


Guest
6 posts

Summary of question: Is there a nice, simple way for me, as an absolute beginner with Coffeecup (although reasonably experienced in raw HTML and CSS), to generate very simple drop-down menus like those along the top of the Coffeecup home page?

Background: Way back around 2002 I started my website; it was hand-coded in HTML and CSS. And from the outset, I tried to code cleanly, with good separation of HTML from CSS and ensuring it passed the "w3.org" HTML and CSS validators. The website is long overdue a major overhaul, not least because it is terrible on phone screens, but also because I would like something slightly higher level to manage the individual pages consistently.

The site is simple. The front page has text and a table of to about fifteen subpages (each of which is then largely a table of links to PDFs). Those subpages logically cluster into about three groups. Nothing fancy. So what I would like, in the reworked site, is have those three groups as drop-down menus (just like along the top of the coffeecup pages). There are no significant graphics: this site is for textual information ("prettiness" is not important, but clean, simple navigability is).

As an experiment, I've started my "project" using CC's "layout" called "Light Two Column Nav Top". And I am happy to rework my content into such layout. (And, taking advantage of CC's "Library" facility, I would additionally plan for my "footer" to be abstracted into a Library item or similar).

But I cannot see a way to turn the layout's "Navigation n" items into menus. If they could end up as something like those of CC's own homepage navigation (and a glance at CC's underlying HTML for them looks absolutely in line with what I was hoping), that would be neat.

Have I missed a "very simple drop-down menus for absolute beginners" FAQ somewhere?

Thanks,
User 122279 Photo


Senior Advisor
14,547 posts

Coffeecup has a tutorial for a menu, 'hamburger' style with dropdowns: https://www.coffeecup.com/help/articles … m-scratch/ This menu is thought being built in SD3 with the Foundation framework. If you would like a ready-made menu, you could take a look at my sharing library (url in signature) and look in the SD3 column.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2912214 Photo


Guest
6 posts

Inger: Many thanks for your reply.

I have looked at your Navigation->SD3.x examples. Your "Simple menu" or "Dropdown menu" look just the sort of thing I wish to do. Thanks! Simple and straightforward is fine.

But then I saw that the "demo"-generated code displayed in my browser (ctrl-U in Mozilla) included a few ".css" files that are absent from the basic Coffeecup (16.1, build 808) that I had downloaded yesterday. And the downloaded "sd3-dropdown-menu" had a ".rsd" file extension; I have never seen this extension before (and my Windows machine didn't recognise it); a quick glance with 'vim' showed that it might be a tar-like archive format

So it is unclear what I should next to get this functionality into basic Coffeecup. I was hoping that it might be a standard zip (or tar) file that could easily unpack onto my Windows machine and into the relevant "css/", "js/" subdirectories.

Your examples look so good and promising, and I would really like to try to get this working!
User 122279 Photo


Senior Advisor
14,547 posts

I was assuming that you would be using the programme Site Designer (SD3). Obviously you will be using the html Editor. The menus I have are made with SD3, but they can be edited in the Editor. I'm not at home right now, but if you could let me know which one(s) you are particularly interested in, I can upload the html version(s) for you. I'll be home in about 2 hours.

Mind you, if you are using the html Editor, you may also take a look at the menus for RSD, RBB and RFF.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2912214 Photo


Guest
6 posts

Many thanks!

"sd3-simple-menu" seems the sort of thing. I wasn't intending to use the 'sticky' aspect. However, it is the submenus, supplemented by the automatic display of the submenu on mouse-over, that looks particularly useful. ("sd-dropdown-menu" had looked OK, but lacks that automatic submenu feature.)

Overall, I'm looking for a product that allows me to maintain a website that is simple and small (but with multiple pages) and with certain features (e.g. header-with-menus, footer) being definable in snippets for automatic inclusion into new pages, and subsequent snippet modification being reflected into all relevant pages. It was suggested I look at the free version of Coffeecup, which seems to have this. The only major hurdle I have seen (so far!) was its lack of inbuilt drop-down menus (whether automatic or not).

You say "... if you are using the html Editor, you may also take a look at the menus for RSD, RBB and RFF." But I don't see those in the Coffeecup menu (v 16.1) on my machine.

Incidentally, the site I am reworking is http://servicemusic.org.uk/. Yes, my current front-page is an absolute abomination! As part of the total overhaul I would be replacing that LH table of three sections of links with three menus (along the top, just like your examples) each with its submenu of 3-6 links. You'll see that the other pages are simple, and that my existing (awful) front page should be simplified to resemble those other pages.
User 122279 Photo


Senior Advisor
14,547 posts

See if you can use this. I've added a wee 'manual'.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,547 posts

David, I didn't thoroughly read the rest of your post until now. I don't use the free HTML Editor, so I can't say what is included or not. I have the paid version, and it has something called a 'library' where you can save snippets of code to be entered into severeal pages and when updating is due, you just have to update once. If this feature is NOT available in the free version, you could think about using php includes.
Also, I don't know if there are any themes/templates included in the free version. In the paid version there is a great deal, also with menus similar to the one I posted here.
But I would honestly advise you, if you want to spend money on a programme, first think through your coding skills. If they are good, then you may go for the paid HTML Editor. But if not, and also with a good grasp of coding, take a look at Site Designer. It is a compete different approach to web design, and a bit of a learning curve, but once you master it, you won't ever look back. And we are some hundreds of users here who may come to your rescue if something goes haywire.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2912214 Photo


Guest
6 posts

Sorry for the delay in acknowledging. (Real life, etc., etc.)

Thank you for that zip file. It seems a great start for me! In my little test Coffeecup project, I pushed the existing directories ("cs", "fonts", "js", "socialicons") and "index.html" sideways (renamed them) and replaced them with yours, and it seems to be behaving as it should in my environment.

Very promising. And I very much appreciate your assistance in getting this going. Thank you!

To your other points:

The website is intended to be simple and clean. Design-wise, I acknowledge that my existing front page fails abjectly and horribly! It is the very opposite of what I always intended it to be. So a major objective of this overhaul is a radical simplification of that page. To this end, being able to reorganise that left-hand side menu stack is a major aim. And I would also like to introduce it onto other pages.

I'm a great believer in staying with default behaviour unless there is really good reason to change, so I specifically intend to avoid "over design" or being fancy.

Coding: I hand-coded the existing site, HTML4 and CSS; taking care to separate out presentation from content; to pass "w3.org" validation; to structure the content good practice ("w3" recommendations, so trying to avoid frames, etc.). By day I am a C/C++/Perl programmer. So I am comfortable hand-coding HTML4, CSS and PHP (but am hoping to avoid having to do any significant javascript).

The other pages will be staying more or less "as is", but the CSS will change their appearance. In my early days I discovered "CSS Zen Garden" which greatly influenced my coding, so this should be useful to minimise changes I need to make.

Given the intended simplicity of the design, the BIG thing I am looking for from Coffeecup is not its "fancy" design capabilities (indeed, far from that) but rather page-management: a way to manage all the simple text pages in a consistent fashion, including the use of snippets/libraries, rather than copying and pasting across all pages (particularly the footer and the proposed new header/menu structure).

Anyway, thanks again for your great help with those menus, and this general chat.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.