• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Contributor ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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

Views

405

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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:

 

<script>
const mobileMenuIcon = document.querySelector('.mobileMenuIcon');
const navUl = document.querySelector('nav ul');
mobileMenuIcon.onclick = function() {
navUl.classList.toggle('showHide');
}
</script>

 

 

 

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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  : )

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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

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

 

image.png

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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.

 

image.png

 

<!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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote

 

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. 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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. 😏

 

image.png

 

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.

 

image.png

 

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote

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.

 

quote

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.

 

quote

 

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.

 

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

LATEST
quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote

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

 

BenPleysier_0-1647209077624.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote
quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote
quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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.

 

BenPleysier_0-1647213347099.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

quote

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines