I am having some difficulty styling the Wordpress menu and to behave how I want it to.
So I am using the following to display my menu:
<nav>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<br />
<form method="get" id="search_form" action="<?php bloginfo('home'); ?>"/>
<input type="text" class="text searchForm" name="s" value="Search" >
</form>
</nav>
Here is the style:
nav li {
background-color: #99D9F3;
margin-bottom: 2px;
padding: 0;
font-weight: 300;
}
nav a {
color: #000;
margin: 0;
padding: 5px; /* you can apply padding to the anchor tags instead */
text-decoration: none;
display:inline-block;
}
.sub-menu{background-color: #fff;}
.sub-menu li {
background-color: #fff;
margin: 5px;
padding: 0;
font-weight: 300;
border-left: 2px solid white;
}
.sub-menu li:hover{
border-left: 2px solid orange;
}
.sub-menu a{color:#aaa;}
.sub-menu a:hover{color:#000; font-weight: 500;}
This is all well and good apart from a few things, only the text is clickable where as I need the whole <li> to be a clickable area. Also, when adding sub items to the menu it stretches out the <li> tag from the menu item they sit under, I need a way to hide those too until the item is clicked on and it then shows the sub menu items.
Don't use padding for the list items. Also you need to set the property value of your anchor tags display to inline-block or block.
display:inline-block;
/* Or just */
display:block;
See the chnages below
nav li {
background-color: #99D9F3;
margin-bottom: 2px;
padding: 0;
font-weight: 300;
}
nav a {
color: #000;
margin: 0;
padding: 5px; /* you can apply padding to the anchor tags instead */
text-decoration: none;
display:inline-block;
}
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
You can use superfish menu jquery.. It will help you
Related
I'm trying to set up a nav button system where you either hover or click on the SVG ( which is but it as a separate php) then there will be button drop dop, but more like transparent button.
text with a clear background (no box or border). how do I do this?
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
#CSS Filters
CSS filters allow us to apply a whole bunch of cool, Photoshop-esque effects right in the browser. Filters are applied to the element after the browser renders layout and initial paint, which means they fall back gracefully. They apply to the whole element, including children. Think of a filter as a lens laid over the top of the element it's applied to.
You can change the opacity with the opacity filter opacity(<number-percentage>); .
and you can put this in a hover css tag
.navbar:hover {
filter: opacity(<number-percentage>);
}
And here is how you make a dropdown navbar:
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
here is the css to the navbar:
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
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;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
I am using the woo-commerce plugin within my Wordpress environment and there are category pages which I need to change the colour of a div background depending on which category are you in.
So I have like a banner across the top which is found in 'archive-product.php'
the div is named 'publicationsHeader'
I need it to change the background when you are category pages like so..
?product_cat=creative
I am a bit stuck on the best approach?
Here is my code:
<div class="publicationsHeader">
<section>
<div class="introLeft">
<h2>Publications</h2>
<h3 style="font-size: 1.2em;
color: #fff;
line-height: 28px;
padding-top: 20px">We write and produce current, practical and highly effective publications that teachers and pupils can use with immediate effect. All resources have been revised for the 2014/15 academic year.</h3>
</div>
<div class="introRight">
<a href="https://www.facebook.com/JaneConsidineEducation" target="_blank">
<button style="background-image:url(img/facebookIcon.png)"></button>
</a>
<a href="https://twitter.com/janeconsidine" target="_blank">
<button style="background-image:url(img/twitterIcon.png)"></button>
</a>
</div>
</section>
</div>
.publicationsHeader{
background-color: #e84b34;
box-sizing:border-box;
padding: 40px 0;
height: auto;
overflow:auto;
}
.publicationsHeader h2{
font-size:3em;
color: #fff;
text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.3);
}
.publicationsHeaderLeft{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px;
float:left;
width: 50%;
}
.publicationsHeaderLeft input{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
}
.publicationsHeaderLeft textarea{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
resize:vertical;
}
.publicationsHeadereft button{
background-color: #ec4a2c;
border: none;
color: #fff;
padding: 10px 20px 10px 20px;
font-size:16px;
}
.publicationsHeaderRight{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px 160px 20px;
float:right;
width: 50%;
}
.publicationsHeaderRight li{
padding: 5px 0;
}
Why not just use the body_class() function? It adds a bunch of class names to your body tag that reflect the current page; in the case of WooCommerce it will add classes for .woocommerce, tax-product_cat and a class identifying that particular category, such as: .term-my-product-cat.
Using these you could style everything quite simply:
.publicationsHeader{
background-color: #e84b34; /* Default colour */
}
.term-product-cat-1 .publicationsHeader {
background-color: red; /* Change background for header for category 1 only */
}
.term-product-cat-2 .pulicationsHeader {
background-color:blue; /* Change background for category 2 */
}
You can read more about body_class() here.
First fetch the get data in a variable with some default:
$pcat = empty($_GET['product_cat']) ? 'default' : $_GET['product_cat'];
Then make your div like this:
<div id="publicationsHeader" class="<?php echo $pcat;?>">
</div>
Define a class in your css file like this:
.creative {
background: url(images/creative.png);
}
.default {
background: url(images/default.png);
}
You could do the following: check which category is currently displaying and give the $background variable a color accordingly. Like so:
if(is_product_category('creative')){
$background = "#ffffff";
}
Then call the $backgroundin the stylesetting of your div, like so:
<div id="publicationsHeader" style="background-color: <?php echo $background; ?>">Content goes here</div>
You can grep the parameter $_GET["product_cat"] and wrap that in a if-clause to set the css-class of publicationHeader via javaScript.
Anyone can tell me what's wrong with these code...
I can't make sub menu to be shown...
I think my mistake at the part where I call sub menu from database. But I checked, there is nothing wrong..
maybe there are some mistake at css. but I don't know...
php code:
<html>
<head>
<link rel="stylesheet" href="<?php echo"css/copy.css" ?>" type="text/css" />
</head>
<?php include "koneksi.php"?>
<body>
<div id="page-wrap">
<ul class="dropdown">
<?php
/*where I select main menu from table mainmemnu*/
$main = mysql_query("SELECT * FROM mainmenu WHERE aktif='Y'");
while($r=mysql_fetch_array($main))
{
echo"<li><a href='$r[link]'><span>$r[nama_menu]</span></a>";
/*where I select sub menu from table submenu*/
$sub = mysql_query
("SELECT * FROM submenu, mainmenu WHERE submenu.id_main = mainmenu.id_main AND submenu.id_main=$r[id_main]");
$jml = mysql_num_rows($sub);
if($jml > 0)
{
echo"<div><ul>";
while($w = mysql_fetch_array($sub))
{
echo
"<li>
<a href='$w[link_sub]'>
<span>
» $w[nama_sub]
</span>
</a>
</li>";
}
echo"</ul></div></li>";
}
else
{
echo"</li>";
}
}
?>
</ul>
</div>
</body>
</html>
css code:
* {margin: 0; padding: 0;}
body {font: 14px Helvetica, San-Serif;}
#page-wrap{width: 800px; margin: 0px auto; padding-left: 419px;}
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }
/* Level One */
ul.dropdown{position: relative;}
ul.dropdown li{font-weight: bold; float: left; zoom: 1; background: #ccc;}
ul.dropdown a:hover{color: #000;text-decoration: none;}
ul.dropdown a:active{color: #222;}
ul.dropdown li a{display: block; padding: 4px 8px; border-right: 1px solid #333; color:#222;}
ul.dropdown li:last-child a{border-right: none;}
ul.dropdown li.hover, ul.dropdown li:hover{background: #ffa500; color: black; position: relative; z-index: 9;}
ul.dropdown li.hover a{color: black;}
/* Level Two */
ul.dropdown ul{width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li{font-weight: normal; background: #DCDCDC; color: #000; z-index: 9; border-bottom: 1px solid #ccc; float: none;}
ul.dropdown ul li a{border-right:none; width:100%; display: inline-block;}
the sub menu won't come out when i bring cursor on the menu...
I would like to see what the HTML generated by the code looks like, but IMO, you are using way too many divs, spans, tags that are not needed..
Check out if this jsfiddle can help you out, its made purely out of HTML & CSS.
This is the part of the CSS you might be missing.
ul.dropdown > li > ul {
display: none;
}
ul.dropdown > li:hover > ul {
display: block;
}
http://jsfiddle.net/x9D37/
You need a javascript to manipulate the block you want to see when hovering over a tag.
You cannot hover over a hidden tag.
You are missing the css that will make the child div display.
Basically it comes down to:
/*hiding initially*/
.dropdown li ul
{
position: absolute;
display: none;
}
/*display selectively*/
.dropdown li:hover > ul
{
display: block;
}
I have a navigation bar at following wordpress site: http://tarjom.ir/demo/pwp
I have two major issues with this navigation bar:
1- I can't vertically align it at the middle.
2- There is a div wrapper as the parent of the <ul> tag that I can't remove it. However I have already set 'container' => '', but it does not work.
<!-- Navigation bar-->
<div id='wp_nav_section' class='grid-100 black-gray-bg font-roya' style='min-height: 100px; display: block;height:100%;'>
<?php wp_nav_menu(array("container" => 'nav')); ?>
</div>
<!-- End of navigation bar. -->
Here is my wordpress navigation code:
Here is all my CSS related to the wordpress navigation:
.menu
{
height: 65px;
min-height: 60px;
padding: 0px;
text-align: right;
background-color: #111;
margin-bottom: 10px;
}
.menu ul
{
direction: rtl;
width: 70%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
height: auto;
padding-top: 0px;
}
.menu li
{
padding: 0px 0px;
display: inline-block;
}
.menu li a
{
color: white;
text-decoration: none;
display: block ;
height: 45px;
background-color: black;
border-right: 2px #333 solid;
padding: 16px 7% 3px 3%;
box-sizing: border-box;
width: 100px;
margin: 0px 0px;
font-size: 110%;
}
.menu li a:hover
{
background-color: #333;
border-right: 2px #F90 solid;
}
I need the <ul> tag to be centered vertically in the <div> wrapper.
Thanks in advanced.
Remove height from .menu{} class. this will solved your vertical align issue.
I would try this, if you haven't already:
<?php wp_nav_menu(
array (
'container' =>false,
'items_wrap' => '%3$s', //"%3$s" is the li list itself. See below for the default value.
) ); ?>
The default values for these two parameters are:
'container' => 'div',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
So I would make sure to define those the way you want them in your call to wp_nav_menu().
You can read more info on my post at http://icode4you.net/wordpress-tricks-customizing-the-output-of-wp_nav_menu/
To center the UL within a div, I would use this code:
<style>
div {
text-align:center;
}
ul {
display:inline-block;
}
</style>
Let me know if you would like any more information or help :)
I am trying to show a lot of results at once (like 25) but my program cut the results around the 5th record having area space still available, the results are in a table
created dynamically but seems that the area doesn't expand accordingly.
<div id="contenido" class="contenido">
<div id="Tabs">
<ul style="cursor:pointer;">
<li id="li_tab1" onclick="tab('tab1')" >
<a>Últimas alertas</a> </li>
<li id="li_tab2" onclick="tab('tab2')"> <a>otras</a> </li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p class="notas">Showing last alerts</p>
<table>
<tr>
<td style="color:blue">Alert</td>
<td style="color:blue">User</td>
</tr>
<?php
while ( $row = $result->fetch_array() ){
echo "<tr><td>".$row['DESCRIPTION']."</td>";
echo "<td>".$row['EMAIL']."</td>";
echo "<td>".$row['SUB_SECCION']."</td></tr>";
}
}
else
echo "error on query: ".$conx->error;
}//else
?>
</table>
</div>
<div id="tab2" style="display: none;">
<!-- We set its display as none because we don’t want to make this
tab visible by default. The only visible/active tab should
be Tab 1 until the visitor clicks on Tab 2. -->
<p>This is the text for tab 2.</p>
</div>
</div> <!-- End of Content_Area Div -->
</div> <!-- End of Tabs Div -->
</div>
CSS creates tabs, but for the moment only the first has the table the other just one line of text, but the table is inside this tab div
archivo css
.contenido {
color: black;/*#333*/
background-color: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
border: 1px solid #ccc;
width: 75%;/*678px;*/
height: 480px;
float: right;
display: inline;
}
#Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
/* make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#Tabs ul li a:hover {
text-decoration: underline;
color:red;
}
#Tabs #Content_Area {
/* this is the css class for the content displayed in each tab */
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
The problem is inside your CSS.
height: 150px; and overflow: hidden; in #Tabs #Content_Area could be factor.
Since you have overflow: hidden; set to "hidden", it could be a factor.
Try changing it to overflow:scroll; or overflow:visible; to see if that works, and/or changing the heights to a higher number for those IDs.
Try different variations.
I see a two possible causes:
The database query only returns 5 results
the DIV is not large enough, and even though the table ends up in,
say, 25 records, the first 5 are only displayed and the rest are
hidden by the boundaries of DIV.
It would help if you put some more PHP code or even the CSS of the #area.