Inspiring

Question

CSS Menu Issues

Forum|Forum|3 years ago
April 12, 2022
2 replies
475 views

Hi Guys.

I've been messing around with a CSS based menu that I found online and I have a few questions. Here's a link to the menu. https://codepen.io/uiswarup/full/dyyqaGR

Firstly, how would you go about implementing this menu in an actual web site? The menu is cool but it takes up alot of screen real estate. The menu has to be visible as you move from page to page and I don't see how that happens in this case.

Secondly, I'm having some issues working with a local copy of the code. There is a large amount of CSS contained within style tags on the main page. When I try to move the CSS into it's own file and create a link/reference to the external CSS file it "breaks" the page. I've looked at the CSS for something that would require it to remain inline and I don't see anything. Additionly the images that are displayed for each menu item do not display. I am assuming that it's because I don't have all the source files.

Any thoughts you have are appreciated. Thanks in advance.

This topic has been closed for replies.

Nancy OShea

Community Expert

That menu looks more like a proof of concept. "Look at me, look at me! Aren't I awesome?!"

Anyway, that example is not practical or flexible enough for production use. When it comes to menus, LESS is MORE.

How many sitewide menu items do you need for your project? The rule of thumb is that each link should have a target area the size of an adult human finger pad (about 45px in diameter). Anything less is too hard to access from touch screens.

The default navbars in Bootstrap should suffice for most web applications. See the code below.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4.5 Starter Page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/**Some Custom Styles for Demo Purposes**/
body {
margin:0;
padding-top:10%;
background: url(https://placeimg.com/1500/900/nature) no-repeat center center fixed;
background-size: cover;
}
.container-fluid {
padding-top: 10%;
width:75%;
min-height: 900px;
}
.opacity-3 { background: rgba(0,0,0,0.6)!important; }

</style>
</head>
<body class="pt-5">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Sub-menu 1</a>
<a class="dropdown-item" href="#">Sub-menu 2</a>
<a class="dropdown-item" href="#">Sub-menu 3</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Link 5</a>
</li>
</ul>
</div>
</nav>

<!--MAIN CONTENT-->
<main class="container-fluid">
<div class="row">
<div class="col-md-8 mx-auto  opacity-3 text-light mt-5">
<h3 class="m-1 p-4">Bootstrap 4.5 in Dreamweaver</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis molestiae veniam ab doloremque illum amet sint, iure labore magni aspernatur architecto eligendi consectetur hic maxime reprehenderit nesciunt similique saepe odio.</p>
</div>
</div>
</main>

<!--Supporting Scripts-->
<!--First jQuery then Popper then Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Hi Guys.

I've been messing around with a CSS based menu that I found online and I have a few questions. Here's a link to the menu. https://codepen.io/uiswarup/full/dyyqaGR

Firstly, how would you go about implementing this menu in an actual web site? The menu is cool but it takes up alot of screen real estate. The menu has to be visible as you move from page to page and I don't see how that happens in this case.

By @VShaneCurtis

It is what it is NOT very usable whilst being impressive. Personally I think it's probably only usable in certain/specific situations like a 1 page website. There's a lot of eye-candy solutions around but a lot of it isnt very user-friendly, its more showcasing than being functional in the real world.

Secondly, I'm having some issues working with a local copy of the code. There is a large amount of CSS contained within style tags on the main page. When I try to move the CSS into it's own file and create a link/reference to the external CSS file it "breaks" the page. I've looked at the CSS for something that would require it to remain inline and I don't see anything. Additionly the images that are displayed for each menu item do not display. I am assuming that it's because I don't have all the source files.

By @VShaneCurtis

You're missing the below 3 files:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

BenPleysier

Community Expert

While I agree with @osgood_ , I think that the missing links are a bit confusing; mixing versions for Bootstrap. Instead try:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Legend

I dont think any javascript is used in the menu example.

Also I don't know what the below is? It just seems to be the social media icons, are they now included in the default version 5 css package?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded