I've been assigned to remake a Drupal website in which i have to implement a dropdown menu.
It works fine on IE8,Chrome,Firefox but not in IE6 (and most users of this site use IE6...)
The module is Superfish, here is some code:
<body class="homepage">
<div id="global">
<div id="header">
<div id="header-content">
<div class="fil-ariane">You are here : Home</div>
<div class="search">search stuff</div>
<div id="block-superfish-1"
class="block block-superfish contextual-links-region">
<div
class="contextual-links-wrapper contextual-links-processed">
<div class="content">
<ul id="superfish-1"
class="menu sf-menu sf-menu-menu-header sf-horizontal sf-style-sna_superfish sf-total-items-3 sf-parent-items-1 sf-single-items-2 nav superfish-processed">
<li id="menu-477-1"
class="first odd sf-item-1 sf-depth-1 sf-no-children">
<li id="menu-501-1"
class="middle even sf-item-2 sf-depth-1 sf-no-children">
<li id="menu-983-1"
class="last odd sf-item-3 sf-depth-1 sf-total-children-3 sf-parent-children-0 sf-single-children-3 menuparent">
<a class="sf-depth-1 menuparent"
href="LIEN_homepage/#">USEFUL LINKS</a>
<ul>
<li id="menu-986-1"
class="first odd sf-item-1 sf-depth-2 sf-no-children">
<a class="sf-depth-2" href="LINK1">text_link1</a>
</li>
<li id="menu-985-1"
class="middle even sf-item-2 sf-depth-2 sf-no-children">
<a class="sf-depth-2" href="LINK2">text_link2</a>
</li>
<li id="menu-984-1"
class="last odd sf-item-3 sf-depth-2 sf-no-children">
<a class="sf-depth-2" href="LINK3">text_link3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
And here's the CSS:
body{
width:100%;
height:100%;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
background-color:#e2dad0;
}
.homepage{background-color:#ffffff;}
#global{
width:100%;
height:100%;
margin:0 auto;
}
#header{
width:100%;
min-width:880px;
height:29px;
max-height:30px;
background:#706e67;
color:#ffffff;
position:fixed;
z-index:10;
top:0px;
}
#header a{font-weight:bold;color:#ffffff;text-decoration:none}
#header a:hover{text-decoration:none;}
#header-content{width:100%;margin:0 auto;}
#header-content .fil-ariane{float:left;padding-top:9px;padding-left:8px;}
#header-content .nav{float:right;margin-right:129px !important;margin-right:67px;}
#header-content .nav ul{display:inline;}
#header-content .nav ul li{display:inline;}
#header-content .nav a,span{vertical-align:middle;font-weight:bold;}
.link-rss{width:14px;height:14px;background:url("../img/common/pictos/rss.gif") left top no-repeat;overflow:hidden;text-indent:-500px;display: inline-block;vertical-align:middle}
#header-content .search{float:right;width:125px;padding-top:2px;overflow:hidden;position:absolute;right:2px;}
#header-content .search form .content{width:123px;height:24px;background:url("../img/common/header/bkgInputText.gif") right top no-repeat;}
#header-content .search .input-submit{width:25px;height:24px;background:url("../img/common/header/btSearch.gif") left top no-repeat;overflow:hidden;margin:0;padding:0;border:0 none;text-indent:-50px;letter-spacing:+100px;vertical-align:top;cursor:pointer}
#header-content .search .input-text{padding:0 0 0 5px;border:0 none;width:90px;height:24px;line-height:24px;color:#826041;vertical-align:baseline;font-size:10px;background-color:#f1f1f0;}
OTHER CSS:
.sf-menu span{
display:block;
position:relative;
}
.sf-menu.sf-style-sna_superfish {
float: left;
margin-bottom: 1em;
padding: 0;
}
.sf-menu.sf-style-sna_superfish.sf-navbar {
width: 100%;
}
.sf-menu.sf-style-sna_superfish ul {
padding-left: 0;
}
.sf-menu.sf-style-sna_superfish a, .sf-menu.sf-style-sna_superfish span {
padding: 0.75em 1em;
}
.sf-menu.sf-style-sna_superfish a.sf-with-ul {
padding-right: 2.25em;
}
.sf-menu.sf-style-sna_superfish.rtl a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
.sf-menu.sf-style-sna_superfish.sf-navbar a {
border: 0;
}
.sf-menu.sf-style-sna_superfish span.sf-description {
color: #f1f1f1;
display: block;
font-size: 0.8em;
line-height: 1.5em;
margin: 5px 0 0 5px;
padding: 0;
}
.sf-menu.sf-style-sna_superfish li,
.sf-menu.sf-style-sna_superfish li li,
.sf-menu.sf-style-sna_superfish li li li,
.sf-menu.sf-style-sna_superfish.sf-navbar {
margin:0px;
background: #706E67;
}
.sf-menu.sf-style-sna_superfish li:hover,
.sf-menu.sf-style-sna_superfish li.sfHover,
.sf-menu.sf-style-sna_superfish li.active a,
.sf-menu.sf-style-sna_superfish a:focus,
.sf-menu.sf-style-sna_superfish a:hover,
.sf-menu.sf-style-sna_superfish a:active,
.sf-depth-1.menuparent.nolink span:hover,
.sf-menu.sf-style-sna_superfish.sf-navbar li li {
display:block;
float:left;
background: #666459;
color: #ffffff;
}
.sf-menu.sf-style-sna_superfish.sf-navbar li ul {
background-color: #008ad2;
}
.sf-menu.sf-style-sna_superfish.sf-navbar li ul li ul {
background-color: transparent;
}
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper ol li {
margin: 0;
padding: 0;
}
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent {
font-weight: bold;
}
.sf-menu.sf-style-sna_superfish ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
display: inline;
float: left;
width: 12em;
}
.sf-menu.sf-style-sna_superfish.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
float: right;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-1 ul.sf-megamenu {
width: 12em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-2 ul.sf-megamenu {
width: 24em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-3 ul.sf-megamenu {
width: 36em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-4 ul.sf-megamenu {
width: 48em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-5 ul.sf-megamenu {
width: 60em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-6 ul.sf-megamenu {
width: 72em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-7 ul.sf-megamenu {
width: 84em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-8 ul.sf-megamenu {
width: 96em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-9 ul.sf-megamenu {
width: 108em;
}
.sf-menu.sf-style-sna_superfish li.sf-parent-children-10 ul.sf-megamenu {
width: 120em;
}
Not everything's useful i guess but i found some solutions in which the style (properties 'position','display') of the nearby divs/classes was important.
My questions are:
how can i make that menu appear on IE6 ? Is it only a matter of styling? Do i have to make some javascript ?
i'm assuming superfish is a spin off of suckerfish...suckerfish required javascript for ie6 support, so i'll assume that you need the same. of you go to superfish documentation page, there are scripts listed as included with the module. i would look to into those. essentially, you need ie6 to fake hover on the elements, to show your menu
Related
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="topmenu">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
<li>The People</li>
<li>The History</li>
<li>The Oceans</li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
I compiled this program without overflow:hidden and it wasn't giving the same output,I can't understand why overflow:hidden is necessary here? I even used overflow:auto and it doesnt show scroll so I know that it isn't that the box is too small for data. It is present in the top menu.
I am a newbiee to CSS and it is really confusing for me that why do they have two classes for some elements, why do they use box-sizing,
And please edit if there is any problem with the way I have
asked,because downvoting it prohibits me from asking questions and
- renders me helpless.
I am an experienced CSS user, and this took a while for me to find. The .topbar element is a ul without a defined height, and so it looks to child elements to determine the height. However, as your elements inside are using float, the parent is not resized.
As this previous answer discusses, overflow: none, is a hack to solve this problem. However, I don't think this is the best approach in your case. I would either:
Define a constant height for your topbar
Use flexbox instead of ul
So I have looked at lots of other examples and I still can't figure out what I am missing. The menu works great except when I look at it in phone mode the menu does not drop on the hover. Can you help?
THE CSS code
/*Strip the ul of padding and list styling*/
#menu ul {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
float: left;
background: #645565;
font-size: 1em;
}
/*Create a horizontal list with spacing*/
#menu li {
float: left;
position: relative;
display: inline-block;
}
/*Style for menu link*/
#menu li a {
display: block;
line-height: 3em;
font-family: Trebuchet MS, Verdana, Arial, sans-serif;
font-size: 0.95em;
color: #BFA877;
text-decoration: none;
padding: 0 0.9em;
}
/*Hover over text upper*/
#menu li:hover > a {
color: #FFF6D6;
}
/*Displays dropdown*/
#menu ul li:hover > ul {
display: block;
}
/*Hide dropdown links until they are needed*/
#menu li ul {
display: none;
position: absolute;
}
/*Display the dropdown on hover*/
.dropdown:hover .dropdown-content {
display: block;
}
/*Style "show menu' label button and hide it by default*/
.dropdown{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #FFF6D6;
background: #645565;
text-align: center;
padding: 10px 0;
display: none;
z-index: 1;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*==========MOBILE===========*/
/*Responsive Styles*/
#media screen and (max-width: 768px){
/*Make dropdown links appear inline*/
#menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
#menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
#menu ul li, li a {
width: 100%;
}
/*Display "show menu" link*/
.dropdown {
display: block;
}
}
THE HTML code
<div id="container">
<label for="dropdown" class="dropdown">Show Menu</label>
<input type="checkbox" id="dropdown" role="button">
<div id="menu">
<ul>
<li>Home</li>
<li>
Massage & Spa
<ul class="dropdown-content">
<li>Massage Treatment</li>
<li>Balancing Energies</li>
<li>Signature Massage Treatment</li>
<li>Thai Massage</li>
<li>Signature Spa Treatment</li>
<li>List of Treatments & Rates</li>
</ul>
</li>
<li>Well Being</li>
<li>
About Us
<ul class="dropdown-content">
<li>Richard Davenport</li>
<li>Katrine Dannieu</li>
<li>Beth Drake</li>
<li>Daniel</li>
<li>Ciciely</li>
<li>Ish</li>
<li>Elizabeth</li>
<li>Tyler</li>
<li>Julia</li>
<li>Asley</li>
<li>Sandra</li>
</ul>
</li>
<li>
To Know
<ul class="dropdown-content">
<li>How to prepare for your massage</li>
<li>The right pressure during your Massage</li>
<li>How often should you get a massage?</li>
<li>Here is why you should book your next appointment ASAP</li>
<li>What is Rieki Who can learn</li>
<li>Dr. Oz and the healing power of Reiki</li>
</ul>
</li>
<li>Location</li><li>
Contact</li><li>
Calendar</li><li>
Events</li><li>
Links</li>
</ul>
</div>
</div><!-----End of container----->
Phones don't support the hover action!
I have a simple question. I'm trying to display the elements for "about" "general" and "social-buttons" classes within a nested unordered list. I want these to appear horizontal and inline with each other. I want them to be side by side basically, not vertical. If you can help me figure out which selector I need to add the 'display:inline' block, that would be much useful.
<div class="footer-container">
<div id="footer_menu">
<div id="footer-copy">
<li class="about-blurb">
<h3>Viral DNA</h3>
<ul>
<li>
<p>Virael Marketing is the leading digital marketing blog for the social web. We are a one-stop hub to help you learn from your viral marketing campaigns, offer tips & tricks, and build the best digital marketing teams.</p>
</li>
</ul>
<li class="General">
<h3>General</h3>
<ul>
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
<li><a class="button" href="#">Store</a></li>
<li><a class="button" href="#">Contact</a></li>
</ul>
<li class="social-icons">
<h3>Follow Virael</h3>
<ul>
<li>
<!--social media buttons go here-->
</li>
</ul>
</ul>
</div>
</div>
The CSS:
.footer-container {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
float: left;
text-align: left;
width: 828px;
text-transform: capitalize;
background-color: #4169E1;
color: #FFF;
position: relative;
bottom: 0;
left: 269px;
border-top: 10px solid #B0C4DE;
overflow: hidden;
z-index=-1000;
}
.footer-container h3 {
text-align:justify;
}
#footer_menu {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
list-style-type:none;
z-index=-1000;
}
#footer_menu ul {
margin: 0px 30px;
padding: 10px 30px;
list-style-type:none;
text-decoration:none;
display:inline;
z-index=-1000;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
z-index=-100;
display:block;
color: white;
clear:both;
}
#footer_menu .about-blurb ul li {
width: 200px;
height: auto;
text-align:justify;
}
Replace your css with mine. Live example here
#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}
Remove margins from the ul and add inline-block to li
I have a hosted blog and I'm modifying templates, however the code for adding submenus to the nav bar is straight out of this great tutorial:
http://www.devinrolsen.com/pure-css-horizontal-menu/
I also read this answer to the question on Stackoverflow http://bit.ly/16KQN0M
But if it's a matter of clearing a float, I can't see where to put "clear: both;" in the HTML (at least, nothing I've tried has worked).
And changing #dropnav li li to display: block; doesn't work either. There must be something I'm missing ...
Here is the CSS. The classes at the top are related to the template but I'll leave them in as they might be relevant.
<style type="text/css">
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody { position: inherit !important; width: 100%; }
#pagebody-inner { position: inherit !important; width: 100%; }
#alpha, #beta, #gamma, #delta {
display: inline;
position: inherit !important;
float: left;
min-height: 0px;
}
#dropnav
{height:31px;}
#dropnav ul
{margin:0px; padding:0px;}
#dropnav ul li
{display:inline; float:left; list-style:none; position: relative; height:31px;
width: 175px; }
#dropnav li a
{color:#efe1ca; font-family:'Roboto Condensed', sans-serif; font-weight:400;
font-size:12px; }
#dropnav li a:hover
{color:#fff; text-decoration: none;}
#dropnav li ul
{margin: 0px; padding: 0px; display: none; position: absolute; z-index: 99; top:
31px; background-color: #f6f3cb; width: 250px;}
#dropnav li:hover ul
{display:block; width:250px; }
#dropnav li li
{list-style:none; display:list-item; font-size:100%;}
#dropnav li li a
{color: #7a3535; text-decoration:underline; width: 250px; font-size: 16px; }
#dropnav li li a:hover
{color:#000000; text-decoration:none; }
li#main {padding: 0px;} /* Sets the padding of items in the main menu */
</style>
And HTML markup, with titles removed:
<div id="main">
<div id="dropnav">
<ul>
<li class="nav-list-item">-------
<ul id="subnav">
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
</ul>
</li>
<li class="nav-list-item">-------
<ul id="subnav">
<li style="width:180px;">-------</li>
<li style="width:180px;"><a href="">-------</li>
</ul>
</li>
</ul>
</div>
</div>
What is the best way to center this nav bar?
I know I can center if I add
#nav ul {
margin:0 auto;
width:720px;
}
or if I remove width and add padding to #nav, but none of these seems right because If I ever need to add another item to the nav bar I will need to change the numbers. any ideas?
this is the code I have so far:
#nav {
background:url(../images/nav-background.jpg) repeat-x;
height:50px;
width:960px;
text-transform:uppercase;
position:fixed;
}
#nav ul li {
display: table-cell;
vertical-align:top;
line-height:3.8em;
}
#nav li {
display:inline;
font-family: 'Philosopher', sans-serif;
font-size:0.9em;
letter-spacing:0.1em;
font-weight:700;
}
#nav li a {
color:#848484;
text-decoration:none;
padding:5px 8px;
}
#nav li a:hover {
color:#fff;
background-color:#636566;
}
.nav-separator {
padding:0 2px;
}
#nav .logo a:hover {
background:none;
}
<div id="nav">
<ul>
<li>Lourenço<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Áreas de Atuação</li>
<li class="logo"><img src="images/logo-lourenco-advogados.png" /></li>
<li>Clientes<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Notícias<img class="nav-separator" src="images/nav-separator.jpg" /></li>
<li>Contato</li>
</ul>
</div>
Try:
#nav {
text-align: center;
}
#nav ul li {
display: inline-block;
}
You can use:
min-width: Apx; /* any value */
width: auto;
margin:0 auto;