I created a drop-down menu in Jquery and it's working perfectly but I have only one problem with the positioning of the menu. I created the menu right after I learned about jquery animations and I'm still a beginner so I didn't follow any tutorials.
So I was wondering how can I put the menu right under the button?
<div id="nav" class="grid_5">
ABOUT
<a id="products" href=""> PRODUCTS </a>
HOME
</div>
<div id="menu">
<a class="menuButton" href=""> Cakes </a><br>
<a class="menuButton" href=""> Cupcakes </a><br>
<a class="menuButton" href=""> Fudges </a><br>
<a class="menuButton" href=""> Ice Creams </a><br>
<a class="menuButton" href=""> Hard Candies </a>
</div>
The menu is set under the button using an absolute position.
Here is how the site looks while full screen:
Here is how the site looks while windowed:
I would like to learn how to do this with JQuery/JScript or CSS.
You're having that problem because the menu is being position relative to the body so as the window width changes the position of the menu moves. To solve this problem you want to place your link and menu in an element with position: relative on it.
This will then mean that you can absolute position your menu relative to the container its in. So something like
<div style="position: relative">
<div id="nav" class="grid_5">
ABOUT
<a id="products" href=""> PRODUCTS </a>
HOME
</div>
<!-- When you position this absolutely it will now be relative to the container -->
<div id="menu">
<a class="menuButton" href=""> Cakes </a><br>
<a class="menuButton" href=""> Cupcakes </a><br>
<a class="menuButton" href=""> Fudges </a><br>
<a class="menuButton" href=""> Ice Creams </a><br>
<a class="menuButton" href=""> Hard Candies </a>
</div>
Obviously it's better not to use inline styles and instead apply a class to the container
Wrap nav and menu div in a div and apply the position relative by which your menu div position would work accordingly:
<div class="relative">
<div id="nav" class="grid_5">
ABOUT
<a id="products" href=""> PRODUCTS </a>
HOME
</div>
<div id="menu">
<a class="menuButton" href=""> Cakes </a><br>
<a class="menuButton" href=""> Cupcakes </a><br>
<a class="menuButton" href=""> Fudges </a><br>
<a class="menuButton" href=""> Ice Creams </a><br>
<a class="menuButton" href=""> Hard Candies </a>
</div>
</div>
css:
.relative{
position: relative;
}
Related
I have 2 html files
index.html and services.html
On services.html I have
<a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a>
<a class="nav-link" data-bs-toggle="tab" href="#ai-tab">AI</a>
<div class="tab" id="ds-tab">
<p>DS section </p>
</div>
<div class="tab" id="ai-tab">
<p>AI section </p>
</div>
It works fine on services.html
But if I am on index.html and I have a link as
AI Section
It doesnt work it just navigates to the page but doesnt show the div I am refering to.
I tried doing something like this but it doesnt work too.
<a data-bs-toggle="tab" href="services.html#ai-tab">AI</a>
Add a data-target attribute to the AI Section link, and set it to the id of the ai-tab div:
<a data-target="#ai-tab" href="services.html">AI Section</a>
I'm having this frustrating issue only on Google Chrome that it won't download my icon pack.
The pack I'm using is ionicon which is pretty straightforward considering its documentation.
I followed the documentation carefully and the pack is working fine with most of the browser but chrome won't show any icon
Here is my footer that has just three icons.
<footer>
<div class="footer">
<ul class="footer-lists">
<li>
<a class="icon" href="#"
><ion-icon name="logo-twitter"></ion-icon
></a>
</li>
<li>
<a class="icon" href="#"
><ion-icon name="logo-instagram"></ion-icon
></a>
</li>
<li>
<a class="icon" href="#"
><ion-icon name="logo-youtube"></ion-icon
></a>
</li>
</ul>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
you must add the script after title tag
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">SITE NAME</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
Hi i am trying to figure out how I get this menu to ALWAYS (unless mobile) lock inside the users view, and for the site grid to resize. but one step at a time how do I get this to lock (so users can't close or open)
Please check the below code. Dictation of fixed drawer should be in a div class above the drawer. It was taken from the MDL page, https://getmdl.io/components/index.html#layout-section/layout
and look under fixed header, there is also a code pen available.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</div>
</main>
</div>
I am working on a bootstrap with node.js express project. Upon getting variables installed into the theme where the username is (as shown below), There is some sort of invisible gap in the viewing of the code.
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img id='picture2' src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span id="name" class="hidden-xs">Firstname Lastname</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img id='picture' src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p><div id="name2">Firstname Lastname</div>
<div id="companytitle"><small>Member</div>since<div id='signupdate'>Nov. 2012</small></div>
</p>
</li>
<!-- Menu Body -->
This image shows the original bootstrap before i added the multiple tags to change the text with ajax. As soon as i added the <div> tags, the visuals of the profile tab parted and started to look like the first image.
I am unsure of how exactly to get these items to align right on the page, as you can see, it almost appears that the data has some breaks in it.
Can anyone point me in the right direction to fix this?
Here is the original boostrap snipped for the profile tab
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
I am using ionic framework and don't to use jQuery .how to make a horizontal sliding bar without using jQuery.
Something like :
I tried following code:
<ion-scroll direction="x" class="wide-as-needed">
<a class="button inline-button">this is a button : 1</a>
<a class="button">this is a button : 2</a>
<a class="button">this is a button : 3</a>
<a class="button">this is a button : 4</a>
<a class="button">this is a button : 5</a>
<a class="button">this is a button : 6</a>
</ion-scroll>
I took reference from : http://codepen.io/calendee/pen/HIuft
but on mobile, touch did not work in above horizontal area.
You could use something like this maybe.
<div class="range-slider" data-slider>
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>