How to make a better menu for cell phone and tablet display

Report · Mar 13, 2022

How to make a better menu for cell phone and tablet display then what I have now?
http://davidswebsite.com/test/common_html_css_tags.html

Report · Mar 13, 2022

better, yes, but in which directions
- ergonomics
- design
- accessibility
- usability
- code optimization
- loading time
- adaptability
- all ?

Report · Mar 13, 2022

Are you wanting to make a drop down menu for tablet and smartphone so the current menu takes up less real estate when the page loads?

If so add the css below AFTER your 'nav' css selector which is near the start of your css styles - (4th in the list)

nav ul {
display: none;
}

.mobileMenuIcon {
display: block;
cursor: pointer;
}

@media screen and (min-width: 768px) {

nav ul {
display: block;
}
.mobileMenuIcon {
display: none;
}
}
.showHide {
display: block;
}

Replace the text and add the 'mobileMenuIcon' class to the <p> tag which is directly above your starting <ul> tag for your menu code:

<p class="center mobileMenuIcon">Mobile Menu Icon</p>

Then add the below javascript to the end of your pages code, directly above the closing </html> tag:

That will give you a basic drop down menu for tablet and smartphone devices if you click on the text 'Mobile Menu Icon'. You can replace the text with a hamburger icon from font awesome (an icon library) or an image. You can also hide the text 'Nav Menu' and the icon of the little bloke typing if you wish for mobile devices.

Report · Mar 13, 2022

Thanks to all. I tried the one from Osgood and it looks much better then what I had.

I copied the code that Nancy has from Bootstrap in a separate page to try out as well. I like the navigation along the top for cell phone.

The "Wappler" software looks interesting too but may be too complicated for me as I am not smart : )

Report · Mar 13, 2022

Or save time and use Bootstrap responsive framework for your project.

In DW CC, go to Insert > Bootstrap Components > Navbar... pick one.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 13, 2022

Or save time and use Bootstrap responsive framework for your project.
In DW CC, go to Insert > Bootstrap Components > Navbar... pick one.

By @Nancy OShea

I've never seen a default vertical desktop version of the Bootstrap nav component so I doubt it will save anytime as you would have to re-engineer the css code to make it happen or Google to find a solution.

Report · Mar 13, 2022

By default, Bootstrap is a mobile-first framework. As such all menus are vertically stacked out of the box until they are viewed on wider viewports.

In Bootstrap 5, you can choose when to expand (.navbar-expand-md or .navbar-expand-lg) or remove the expand class entirely as I have done here. No CSS editing needed.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--latest minified JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
<!--navbar-->
<nav class="navbar bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-md-10 mx-auto">
<h3 class="mt-3">Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on all screens and replaced by a button in the top right corner.</p>
<p>When button is clicked, the navigation bar will open to reveal vertically stacked links.</p>
</div>
</div>
</div>
</body>
</html>

I think it saves a lot of time. 😀

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 13, 2022

I think it saves a lot of time. 😀

By @Nancy OShea

You obviously have not looked at what the OP is asking for. They are using a naviagtion solution which was perhaps more 'fashionable' 15 years back for the desktop version.

Beside the OP is using Grid for layout, something which Bootstrap is struggling to introduce given the number of options. I think they are trying to convince users to adopt their 'hacky' version of it or what will be when they finally get it together.

Report · Mar 13, 2022

I looked at what's there. It's a practicum based on old notions about web design. Although the OP used GRIDS, that doesn't elevate it much beyond ordinary table-columns. There's too much wasted space on wide screens. Just imagine how that sea of emptiness will play on 4K & 5K displays. 😏

Sure Bootstap uses Flexbox, there's nothing wrong with that. In fact, Bootstrap doesn't preclude developers from using GRIDS if they wish to. I sometimes use both when the project calls for it because they are not mutually exclusive. Bootstrap on it's own is highly flexible for building everything from dashboards & portfolios to blogs/magazines.

The Snippets panel in Dreamweaver CC contains many more Bootstrap goodies. And you can add your own custom Snippets to the list which I've done many times. I have more custom snippets than test pages.

https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 13, 2022

Although the OP used GRIDS, that doesn't elevate it much beyond ordinary table-columns.

By @Nancy OShea

Grid is obviously capable of way beyond anything table columns could do, they are set in stone, grid can place items anywhere in your layout if required, which makes it particuarly useful for responsive layout, much more powerful than even flexbox.

There's too much wasted space on wide screens. Just imagine how that sea of emptiness will play on 4K & 5K displays. 😏

By @Nancy OShea

Everyone has an opinion but its not something I've been invited to comment on.

Sure Bootstap uses Flexbox, there's nothing wrong with that. In fact, Bootstrap doesn't preclude developers from using GRIDS if they wish to. I sometimes use both when the project calls for it because they are not mutually exclusive. Bootstrap on it's own is highly flexible for building everything from dashboards & portfolios to blogs/magazines.

I'm not going to advise someone to take a step backwards if they are using a more advanced layout technique which is the future. Most advanced developers are using Grid now and have been for a few years while Bootstrap plays catch up again, just as it did with flexbox.

The Snippets panel in Dreamweaver CC contains many more Bootstrap goodies. And you can add your own custom Snippets to the list which I've done many times. I have more custom snippets than test pages.
https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html

By @Nancy OShea

Yeah sure, I have pages and pages of vanilla solutions and snippets all written by myself, so most basic components are quick and easy to implement, naming conventions are my own, code is streamlined for super easy management.

Report · Mar 13, 2022

I realize now that the OP doesn't use Dreamweaver. So I think this banter is just a waste of everyone's time. I will refrain from further comments that will be totally ignored anyway.

Color me annoyed. I lost an hour today to Daylight Savings Time! Grrrrrr 😬

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 14, 2022

I realize now that the OP doesn't use Dreamweaver.

By @Nancy OShea

If that is the case then considering DW is now passed its sell by date that has to be a positive, if nothing else has come of this thread.

Report · Mar 13, 2022

I've never seen a default vertical desktop version of the Bootstrap nav component so I doubt it will save anytime as you would have to re-engineer the css code to make it happen or Google to find a solution.

By @osgood_

Very easily done, see

https://youtu.be/vOi6TAK_YlM

Wappler, the only real Dreamweaver alternative.

Report · Mar 13, 2022

I've never seen a default vertical desktop version of the Bootstrap nav component so I doubt it will save anytime as you would have to re-engineer the css code to make it happen or Google to find a solution.
By @osgood_

Very easily done, see
https://youtu.be/vOi6TAK_YlM

By @BenPleysier

I don't really see that a Wappler video is very useful, the OP isnt using Wappler and yes, easily done, some of us don't require Bootstrap to do the basics.

Report · Mar 13, 2022

I don't really see that a Wappler video is very useful, the OP isnt using Wappler and yes, easily done, some of us don't require Bootstrap to do the basics.

By @osgood_

Please remove your blinkers.

The principle is the same no matter which IDE you are using or which server model that you are using.

Add an Off-canvas
Add a bit of CSS
Add vertically orientated navigation

Bootstrap is still your best mate.

Wappler, the only real Dreamweaver alternative.

Report · Mar 13, 2022

I don't really see that a Wappler video is very useful, the OP isnt using Wappler and yes, easily done, some of us don't require Bootstrap to do the basics.

By @osgood_

Please remove your blinkers.

The priciple is the same no matter which IDE you are using or which server model that you are using.
Add an Off-canvas
Add a bit of CSS
Add verically orientated navigation

Bootstrap is still your best mate.

By @BenPleysier

As I said in my reply, the OP is NOT using Wappler. Dreamweaver has no ability to create a Bootstrap off-canvas menu by default so if the OP was to do that and use Bootstrap it would be beyond their skill level. Creating an off-canvas menu without Bootstrap is very simple to do and I'd probably get it done quicker then your video shows using less code!!

Bootstrap might be YOUR best mate but its certainly not mine.

Report · Mar 13, 2022

I did ask you to remove your blinkers.

To add an Off-canvas, go to the Bootstrap site and copy the code. You can then paste it into your document. That is exactly what Wappler does when the Off-canvas component is selected.

Wappler, the only real Dreamweaver alternative.

Report · Mar 13, 2022

I did ask you to remove your blinkers.

To add an Off-canvas, go to the Bootstrap site and copy the code. You can then paste it into your document. That is exactly what Wappler does when the Off-canvas component is selected.

By @BenPleysier

I didnt say it wasnt possible. I said you could not do it as 'default' in Dreamweaver without extra work/knowledge that the code was available, extra styling etc. The whole point is does Bootstrap make it any easier than copying the code at the url the OP supplied for an off-canvas menu - I dont think so and if you dont know Bootstrap vanilla code is going to be easier to style if you know some minor css as the OP appears to. Plus of course you would NOT use a Bootstrap solution if you only wanted an off-canvas menu, why would you want the extra bloat of a huge js file and huge css file....the mind boggles at the unprofessional solutions given in this forum?

Report · Mar 13, 2022

I would not even know the question to ask so thanks for the Off-canvas menu name so I can search on a how to.

"Creating an off-canvas menu without Bootstrap is very simple to do"

Here is W3 site that shows how:

https://www.w3schools.com/howto/howto_js_off-canvas.asp

Report · Mar 13, 2022

The example shown in the video produces the following Off-canvas code

    <div class="offcanvas offcanvas-start" id="offcanvas1" tabindex="-1">
        <div class="offcanvas-header">
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <div class="navbar-nav flex-column">
                            <a class="nav-item nav-link active" href="admin/" internal>Home</a>
                            <a class="nav-item nav-link" href="admin/categories" internal>Categories</a>
                            <a class="nav-item nav-link" href="admin/recipes" internal>Recipes</a>
                            <a class="nav-item nav-link" href="admin/comments" internal>Comments</a>
                            <a class="nav-item nav-link" href="admin/pages" internal="">Pages</a>
                            <a class="nav-item nav-link" href="admin/users" internal>Users</a>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

Wappler, the only real Dreamweaver alternative.