Would you help with my nav menu? I need help with my nav menu. I want the search item to be a drop down menu but I can't quite get it coded properly. It works for the most part but the search item I want to be a drop down menu and I can't seem to get it right. It doesn't line up properly on the hover.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://kit.fontawesome.com/6eab1538de.js" crossorigin="anonymous"></script>
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
/* utility classes */
.btn {
background:darkgrey;
color:#fff;
padding:10px 13px;
}
h1,h2,h3 {
padding-bottom:30px;
}
p {
line-height: 1.5rem;
font-size: 1.2rem;
padding-bottom:20px;
}
.bg-light {
background:#e3d8d8;
}
.bg-primary {
background:#867e7e;
color:#000;
}
/* navigation */
.container {
margin:auto;
max-width:1300px;
}
li {
list-style:none;
padding:13px;
font-size:1.3rem;
}
ul {
text-decoration: none;
display:flex;
}
.content {
display:flex;
justify-content:space-between;
align-items:center;
height:70px;
}
#navbar {
height:70px;
background:#333;
}
a {
text-decoration:none;
color:#fff;
}
.content li a:hover {
background:#e6e6e6;
color:#000;
padding-top:24.5px;
padding-bottom:24.5px;
}
.logo {
color:#fff;
}
/* dropdown manu */
.dropbtn {
display:inline-block;
color:white;
padding-top:13px;
padding-bottom:13px;
padding-right:13px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown {
padding:0;
margin:0;
box-sizing:border-box;
position:relative;
}
.dropdown-content {
margin-top:8px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: blue;
padding:13px;
text-decoration: none;
display: block;
text-align: left;
}
/* li a:hover, */
.dropdown:hover {
background:#e6e6e6;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* this ensures that drop list is below drop item has to be block */
.dropdown:hover, .dropdown-content {
display: block;
}
/*showcase */
#showcase {
background:url("https://images.pexels.com/photos/6407570/pexels-photo-6407570.jpeg?auto=compress&cs=tinysrgb&w=400");
background-repeat: no-repeat;
background-position:center;
background-size:cover;
height:400px;
text-align:center;
display:flex;
align-items:center;
}
#showcase {
display:flex:
justify-content:center;
align-items:center;
}
.showcase-content h1 {
/* padding-bottom:30px; */
color:#fff;
font-size:2.5rem;
font-weight:700;
}
.showcase-content p {
/* line-height: 1.5rem;
font-size: 1.2rem; */
color:#fff;
font-weight: 800;
}
.showcase-content {
background:rgba(0,0,0,.2);
}
/* company info */
.info-content a {
color:#000;
}
#company-info {
height:400px;
}
#company-info .info-img {
width:50%;
min-height:100%;
background:url("https://images.pexels.com/photos/5093029/pexels-photo-5093029.jpeg?auto=compress&cs=tinysrgb&w=400");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.info-content {
display:flex;
flex-direction:column;
width:50%;
height:100%;
text-align:center;
justify-content:center;
align-items:center;
}
.flexclass {
display:flex;
height:100%;
}
/*services section */
.box {
width:25%;
text-align:center;
padding:15px;
line-height:1.2rem;
}
.box h3 {
padding-top: 6px;
}
</style>
</head>
<body>
<!-- navigation -->
<div id="navbar">
<div class="container">
<div class="content">
<h1 class="logo">JLG Enterprises</h1>
<ul>
<li>Home</li>
<li>About</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Item1
Item2
Item3
</div>
</li>
</ul>
</div>
</div>
</div>
<!--Showcase -->
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h1 class="headclass">Our Services cannot be beaten</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsam vel ut laborum obcaecati totam, necessitatibus reprehenderit nam quasi ad?</p>
</div>
</div>
</div>
<section id="company-info">
<section class="flexclass">
<div class="info-img"></div>
<div class="info-content bg-light">
<h2 class="info-head">The History of our Company</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis doloremque magnam, non expedita earum culpa.</p>
Learn More
</div>
</section>
</section>
<section id="services" class="flexclass">
<div class="box bg-primary">
<i class="fa-solid fa-mosquito fa-3x"></i>
<h3>Pest Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box">
<i class="fa-solid fa-droplet fa-3x"></i>
<h3>Irrigation Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box bg-primary">
<i class="fa-regular fa-image fa-3x"></i>
<h3>Landscaping Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
<div class="box">
<i class="fa-solid fa-building fa-3x"></i>
<h3>Commercial Services</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, architecto?</p>
Read More
</div>
</section>
</body>
</html>
Why is my text not in
"Text overflow: ellipsis"?
I want my text to be directly in ellipsis and the excess text to be hidden when the containers slide.
You can find my code attached.
Thank you for help.
http://jsfiddle.net/5gLtraxh/12/
.wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description{ overflow:hidden;
text-overflow: ellipsis;
}
.description2{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.price{
position: absolute;
right: 0;
bottom: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
position: absolute;
right: -100px;
bottom: 0;
width: 100px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
right: 0;
}
.wrapper:hover .price {
transition: 1s;
right: 100px;
}
<div class="wrapper">
<h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
<p class="description2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla
</p>
<span class="price"></span>
<div class="slide"></div>
</div>
You cannot use position: absolute in this case since it will make the <div> no longer takes up any space. You can position them with float for example:
.wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description
{
white-space: nowrap; /*I am guessing you want this*/
overflow:hidden;
text-overflow: ellipsis;
}
.description2
{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.price
{
float: right;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
float: right;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
.wrapper:hover .price {
transition: 1s;
right: 100px;
}
<div class="wrapper">
<div class="slide"></div>
<span class="price"></span>
<h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
<p class="description2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla nihil fugit debitis assumenda reiciendis ab velit cupiditate blanditiis perspiciatis hic itaque reprehenderit, enim officia iusto, sint quod modi architecto!
</p>
</div>
Flexbox solution:
.wrapper {
display: flex;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
justify-content: space-between;
}
.description-wrapper {
min-width: 0;
}
.slider-wrapper {
display: flex;
}
.description
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.description2
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price
{
flex-shrink: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
flex-shrink: 0;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
.wrapper:hover .price {
transition: 1s;
}
<div class="wrapper">
<div class="description-wrapper">
<h4 class="description">Lorem ipsum</h4>
<p class="description2">
Lorem ipsum dolor sit amet</p>
</div>
<div class="slider-wrapper">
<span class="price">sd</span>
<div class="slide"></div>
</div>
</div>
Hi i noticed when i collapse the text the code is not working as expected. Items are no longer at the end of the wrapper.
As you can see in the code below.
.wrapper {
display: flex;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description-wrapper {
min-width: 0;
}
.description
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.description2
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price
{
flex-shrink: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
flex-shrink: 0;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
<div class="wrapper">
<div class="description-wrapper">
<h4 class="description">Lorem ipsuctetur</h4>
<p class="description2">
Lorem ipsum dolor sit ame</p>
</div>
<span class="price">33$</span>
<div class="slide"></div>
</div>
magento 2 admin backend has one user interface that when we click on widnow new sliding window comes from right side.for sample view go to
product->catalog->add product->image and videos tab-> and click addVideo button
how to implement this sliding effect in our custom module.if anybody know please help with this.very important to me.
That is implemented by using modal, you can use custom html in your admin form. here is normal example for basic html implementation:
.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content,
.modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.left .modal-body,
.modal.right .modal-body {
padding: 15px 15px 80px;
}
/*Left*/
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{
left: 0;
}
/*Right*/
.modal.right.fade .modal-dialog {
right: -320px;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog {
right: 0;
}
/* ----- MODAL STYLE ----- */
.modal-content {
border-radius: 0;
border: none;
}
.modal-header {
border-bottom-color: #EEEEEE;
background-color: #FAFAFA;
}
/* ----- v CAN BE DELETED v ----- */
body {
background-color: #78909C;
}
.demo {
padding-top: 60px;
padding-bottom: 110px;
}
.btn-demo {
margin: 15px;
padding: 10px 15px;
border-radius: 0;
font-size: 16px;
background-color: #FFFFFF;
}
.btn-demo:focus {
outline: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container demo">
<div class="text-center">
<button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2">
Click Here
</button>
</div>
<!-- Modal -->
<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4>
</div>
<div class="modal-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
</div><!-- container -->
I have a horizontal navigation bar with the first link in the navigation bar "products" having a vertical drop down menu. This was working not long ago then when I added more content to this website today the sub menu for "products" disappeared, I do not know how to get it working again or why it stopped working in the first place.
Any ideas??
here is my code:
(the html part is in li class"products" in div id"navigation", and the css part for the sub menu is where I've commented "/products menu/". I've place all the code here as the error happened only after I added more code, it was working before. So maybe I have an error in other parts too which is preventing the sub menu from working, not sure though. )
html:
<body>
<div id="wrapperContainer">
<div id ="container">
<!-- header -->
<div id = "header">
<!-- logo -->
<div id = "logo">
<img src = "images/TelefunkenLogo.png" width="132" height="20"/>
</div>
<!-- close logo -->
<!-- contact/languages/flag -->
<div id = "rightHeader">
<ul>
<li>CONTACT</li>
<li onclick="location.href='#languageContainer';"><a href ="#" >SELECT COUNTRY</a></li>
<li class = "flag"><img src = "images/germany.png"/></li>
</ul>
</div>
<!-- close contact/languages/flag -->
</div>
<!-- close header -->
<!-- drop down language options -->
<div class="languageContainer">
<!-- left options-->
<div id="leftLanguageContainer">
<ul>
<li><img src = "images/england.png"/>INTERNATIONAL - English</li>
<li><a id="selectCountry" href="#"><img src = "images/germany.png"/>DEUTSCHLAND - Deutsch</a></li>
</ul>
</div>
<!-- close left options-->
<!-- cross -->
<a class="closeCross" title="Close" href="#">
<span></span>
</a>
<!-- close cross -->
</div>
<!-- close drop down language options -->
<!-- navigation -->
<div id="navigation">
<!-- menu items -->
<ul class="menu">
<li class="home"><img src="images/homeButton.png" alt="Telefunken"/></li>
<li class="products" >PRODUCTS
<ul class="subMenu">
<li><img src="images/product1.jpg" alt="Telefunken"/>some text</li>
<li><img src="images/product2.jpg" alt="Telefunken"/></li>
<li><img src="images/product3.jpg" alt="Telefunken"/></li>
<li><img src="images/product4.jpg" alt="Telefunken"/></li>
<li><img src="images/product5.jpg" alt="Telefunken"/></li>
<li><img src="images/product6.jpg" alt="Telefunken"/></li>
<li><img src="images/product7.jpg" alt="Telefunken"/></li>
<li><img src="images/product8.jpg" alt="Telefunken"/></li>
<li><img src="images/product9.jpg" alt="Telefunken"/></li>
</ul>
</li>
<li class="company">COMPANY</li>
<li class="service">SERVICE</li>
<li class="news">NEWS</li>
</ul>
<!-- close menu items -->
<!-- search function -->
<div id="searchWrapper">
<div id="search">
<form action="searchresult/" method="post" onsubmit="return searchAction(this)">
<input type="text" name="tx_indexedsearch[sword]" value>
<input type="hidden" id="searchProductUrl" name="searchProductURL" value="searchresultproducts/">
<select name="page"id="selectPage">
<option value="1">WEBSITE</option>
<option value="2">PRODUCTS</option>
</select>
<div id="submitButton">
<input type="submit" value class ="btnSubmit">
</div>
</form>
</div>
</div>
<!-- close search function -->
</div>
<!-- close navigation -->
</div>
<!-- close container -->
<div class="slider" >
<img src="images/sliderBkg.jpg" alt="alt text" width="100%" />
<div id="sliderImages">
<img class="img" style="width:983.5px; margin: 0 auto" src="images/sliderLEDTV.jpg">
<!--<img class="img" style="width:983.5px" src="images/sliderCamcorder.jpg">
<img class="img" style="width:983.5px" src="images/sliderSystemPa.jpg">-->
</div>
</div>
<!-- slider
<div class="slider" style="width:100%;">
<img class="img" style="width:983.5px" src="images/sliderLEDTV.jpg">
</div>-->
<!--<img class="img"src="images/sliderLEDTV.jpg">
<img class="img"src="images/sliderCamcorder.jpg">
<img class="img"src="images/sliderSystemPa.jpg">-->
<!-- close slider -->
<!-- lower content -->
<div id="lowerContent">
<div id="leftContent">
<h1>RECENT PRODUCTS</h1>
<div class="inline"><div id ="product1">
<img src="images/recentProducts1.jpg">
<h2>PORTABLE </br>STEREO RDS RADIO</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
<div class="inline"><div id ="product2">
<img src="images/recentProducts2.jpg">
<h2>ICONCERTO </br>I-POD PLAYER</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
<div class="inline"><div id ="product3">
<img src="images/recentProducts3.jpg">
<h2>T9HD </br>42" (106 CM) LOREM</h2>
<p>Some Text.</p>
<span class=">" style="font-size=0.7em; color:#F00; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> > </span> <span class="more" style="color:#000000; font-size:0.7em; font-family:'Arial', 'Gill Sans', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;"> more</span>
</div></div>
</div>
<div id="rightContent">
</div>
</div>
<!-- close lower content -->
<!-- footer -->
<div id="footer">
</div>
<!-- footer -->
</div>
</body>
css:
#charset "utf-8";
/* CSS Document */
/*all content sits in here*/
#wrapperContainer {
width:100%;
}
#container {
width:983.5px;
margin:0px auto;
}
h1 {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 1em;
color:#7f7f7f;
}
h2 {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 0.8em;
color:#000000;
}
p {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 0.7em;
color:#666666;
}
a:link {
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
color:#d34242;
}
/*header*/
#header {
margin: 0 auto;
padding: 20px 0 0px 0;
height: 60px;
width: 983px;
}
/*logo in header*/
#logo {
float: left;
}
/*links to the right of the header*/
#rightHeader {
float: right;
}
/*styling the header links*/
#rightHeader li {
display: inline;
list-style-type: none;
padding: 5px;
border-right:1px solid #dbdbdb;
padding-right:10px;
}
#rightHeader li a:link {
text-decoration: none;
font-size: 12px;;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#rightHeader li a:visited {
text-decoration: none;
text-size: 0.01em;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
a.selectCountry:hover + .languageContainer {
visibility: visible;
}
#rightHeader li a:hover {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #cc0000;
}
/*this is meant to display the language options when you click on 'select country'*/
.languageContainer {
cursor:pointer;
margin: 0 auto;
position:relative;
display:none;
padding: 20px 0 0px 0;
width: 983px;
height: 70px;
border:1px solid #b2b2b2;
}
/*language options*/
#leftLanguageContainer li {
display: inline;
float: left;
padding:30px;
margin-left:-40px;
padding-top:0px;
}
/*language options styling*/
#leftLanguageContainer li a:link {
text-decoration: none;
font-size: 9px;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#leftLanguageContainer li a:visited {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #b2b2b2;
}
#leftLanguageContainer li a:hover {
text-decoration: none;
font-family: "Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #cc0000;
}
/*cross in the language container*/
a.closeCross {
background-image:url('images/closeCross.png');
display:block;
width:30px;
height:30px;
margin-top:-36px;
float:right;
overflow: hidden;
text-decoration:none;
}
a.closeCross:hover {
background-image:url('images/closeCrossHover.png');
}
/*main navigation*/
#navigation {
background-image:url(images/menuBkg.png);
background-repeat: no-repeat;
height:40px;
width:103%;
z-index:999;
position:absolute;
overflow:hidden;
}
/*setting height of the menu*/
.menu {
height:40px;
}
/*styling the home button*/
.menu li.home {
display:inline;
position:relative;
left:-40px;
top:-25px;
height:43px;
width:40px;
padding:0px;
}
/*products menu*/
.menu li ul.subMenu {
margin:0px;
display:none;
padding:0px;
background:#FFFFFF;
width:985px;
top:40px;
height:250px;
}
.menu li:hover ul.subMenu {
display:block;
width:970px;
}
.menu li li {
list-style:none;
display:list-item;
width:100%;
top:0px;
left:10px;
line-height:2px;
background:#FFFFFF;
}
.menu ul.subMenu li {
display:inline;
list-style:none;
position:relative;
}
.menu li ul.subMenu {
margin:0px;
padding:0px;
display:none;
position:absolute;
}
/* trying to set a width to each 'li' in the subMenu to get the text to move below the image
.menu li ul.subMenu li {
width:10px;
}*/
.subMenu a:hover {
color:#603;
/*border properties*/
}
/*end products menu*/
/*styling individual menu links*/
.products {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
}
.products:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.company {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
width:120px;
}
.company:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.service {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
margin-left:-4px;
}
.service:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
.news {
border-right: 1px solid #eaeaea;
border-left: 1px solid #c9c9c9;
margin-left:-4px;
}
.news:hover {
background-image:url(images/pressed2.jpg);
background-repeat: no-repeat;
top:-40px;
background-size: 120px 40px;
font-color: #FFFFFF;
color: #FFFFFF;
}
/*all menu links in navigation bar*/
.menu li {
display:inline;
position:relative;
bottom:45px;
right:50px;
width:130px;
height:43px;
padding:15px;
}
.menu li a:link {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
width:120px;
height:43px;
text-decoration:none;
color: #000000;
}
.menu li a:visited {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
width:120px;
height:43px;
text-decoration:none;
color: #000000;
}
.menu li a:hover {
font-family:"Arial", "Gill Sans", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:0.8em;
text-decoration:none;
color: #FFFFFF;
}
/*search bar in navigation*/
#searchWrapper {
height:100px;
left:212px;
/*float:right;*/
position:relative;
}
#search{
left:80px;
top:70px;
}
/*puts everything in the menu on the same line. */
.menu, #searchWrapper, #search, #submitButton {
display: inline-block;
vertical-align: top;
}
#submitButton {
z-index:1;
}
.btnSubmit {
border:0;
width:40px;
height: 40px;
top:10px;
background-image:url(images/rightArrow.jpg);
}
.btnSubmit:hover {
background-image:url(images/rightArrowPressed.jpg);
}
/*style slideshow*/
.slider {
height: 420px;
overflow:hidden;
}
#sliderImages {
}
/*#slideshow, #navigation {
display: inline-block;
vertical-align: top;
}
#slideshow {
margin-top:-40px;
margin-left: -30px;
}*/
#lowerContent{
margin: 0 auto;
padding: 0px 0 0px 0;
width: 983px;
}
#leftContent {
padding-left:10px;
width:750px;
display:inline;
}
.inline {
float: left;
}
#product1 {
width:240px;
border-right: 1px solid #dbdbdb;
}
#product2 {
width:240px;
padding-left:40px;
border-right: 1px solid #dbdbdb;
}
#product3 {
width:240px;
padding-left:40px;
border-right: 1px solid #dbdbdb;
}
I am trying to switch out the show and hide functions of jquery for the hoverintent plugin. I want to do this for 2 reasons, number one you can control how long the mouse is over the menu item before the sub item pops up, and number 2 it stops multiple instances from building up. I have been trying since last night to change my code, but I am just not getting this to work...below is my original jquery and html, any help would be greatly appreciated. Thanks ALL!!!
Web Site with Dropdown Menu
http://www.nestudiosonline.com/test.php
Jquery
$(document).ready(function() {
// shows the hidden div in the list
$('#dave').mouseover(function() {
$('#aboutdke').show('200');
});
// hides the hide the div again for that list item
$('#dave').mouseleave(function() {
$('#aboutdke').hide();
}); });
html
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content </div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
I did it yay...this is the most simple jquery solution to do a basic drop div with the hoverintent plugin, my html did not have to change at all, ill show my css too....observe
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function() {
//add hovering class to li's inside of the unordermened with the id menu
function addMega(){
$(this).addClass("hovering");
}
//remove hovering class to li's inside of the unordermened with the id menu
function removeMega(){
$(this).removeClass("hovering");
}
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time
var megaConfig = {
interval: 300,
sensitivity: 4,
over: addMega,
timeout: 200,
out: removeMega
};
//make list items with the class megamenu have the hoverinter plugin excuted on them
$("li.megamenu").hoverIntent(megaConfig)
});
//]]>
</script>
CSS
ul#menu
{
display:block;
list-style-type:none;
margin:0;
padding:0;
}
ul# menu li
{
display:inline;
position: relative;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
position: absolute;
}
ul#menu li.hovering div {
display: block;
}
#aboutdke
{
display:block;
color:#FFF;
text-align:left;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
background-color:#000;
margin:0;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
border:0px;
width:910px;
height:280px;
float:left;
position:absolute;
z-index:99999;
top:164px;
left:140px;
}
a.links:link
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
a.links:visited
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
/* mouse over link */
a.links:hover
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
/* selected link */
a.links:active
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
a.dkeorg:link
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
a.dkeorg:visited
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
}
/* mouse over link */
a.dkeorg:hover
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
float:left;
}
/* selected link */
a.dkeorg:active
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
float:left;
}