CSS Menu Issues

Explorer ,
Apr 12, 2022 Apr 12, 2022

Copy link to clipboard

Copied

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.

TOPICS
Bootstrap , Code , Interface

Views

92

Likes

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 ,
Apr 12, 2022 Apr 12, 2022

Copy link to clipboard

Copied

quote

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.

 

quote

 

 

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">

 

 

Likes

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
Adobe Community Professional ,
Apr 12, 2022 Apr 12, 2022

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Likes

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 ,
Apr 13, 2022 Apr 13, 2022

Copy link to clipboard

Copied

LATEST

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">

 

Likes

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
Adobe Community Professional ,
Apr 12, 2022 Apr 12, 2022

Copy link to clipboard

Copied

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>

image.png

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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