I have the following css for tabs,
.columbia-browser-blackberry .ui-tabs .ui-tabs-nav li a, .columbia-browser-
chrome .ui-tabs .ui-tabs-nav li a, .columbia-browser-iemobile .ui-tabs .ui-
tabs-nav li a, .columbia-browser-safari .ui-tabs .ui-tabs-nav li a,
.columbia-browser-moz.ui-tabs .ui-tabs-nav li a
{
padding: .5em 1em;
width: 225px;
word-wrap: initial;
height: 25px;
text-align: center;
display: inline;
}
Html
/**
* Page Tabs Control
* #TODO guerrics: overflowing tabs
*
* #param array pages - array of pages (default: map.values(page.subpages))
* #param str tab - name of the selected tab (default: __request.args.tab)
*/
var pages = $pages ?? map.values(page.subpages);
let pages = [ (p is str) ? wiki.getpage(p) : p foreach var p in pages];
var selectedTab = $tab ?? __request.args.tab;
// find the active tab page
var activeTab = [ tabpage foreach var tabpage in pages where tabpage.name ==
selectedTab ][0];
// no selected tab found, use first tab
if (!activeTab) {
let activeTab = pages[0];
}
<div class="mt-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"
id="tabs">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-
header ui-corner-all">
foreach(var tabpage in pages) {
<li id=('tab-'..tabpage.name) class=('ui-state-default ui-
corner-top'..(tabpage.name == activeTab.name ? " ui-tabs-selected ui-state-
active " : ""))>
<a href=(page.uri & {tab: tabpage.name})>
tabpage.title ?? "#" .. (__count + 1)
</a><span></span>
</li>
}
</ul>
<div class=("ui-tabs-panel ui-widget-content ui-corner-bottom"..(#pages
> 0 ? "" : "ui-state-empty"))>
if (activeTab) {
var contents = activeTab.contents;
if (contents) {
contents;
} else {
wiki.page(activeTab.path);
}
}
</div>
</div>
It works for Google chrome, but it doesn't work in Mozilla and Internet Explorer. I am trying to giving the tabs a uniform width of 225px.
Any help would be appreciated?
To apply width, set css property 'display' to either 'block' or 'inline-block'.
block: the element will sit in a single line. In such case you may want to set float so links are in the same line;
inline-block; the element will have height, width, etc, and multiple elements will sit in the same line (block).
try with:
display:inline-block
This is how it worked.
body .ui-tabs .ui-tabs-nav li a
{
padding: .5em 1em;
width:225px;
word-wrap: initial;
height: 25px;
text-align: center;
display: inline-block;
}
Related
I would like to style my menu bar Like THIS.
It's fixed to the top of the site when you scroll down and it isn't fixed where it is when the page is loaded.
How can it be done with CSS?
What you're after is a 'sticky navbar/menu'.
The simplest way would be to add the below CSS to your menu/navbar
position:fixed;
top:0px;
That said, for an effect closer to the one you've posted, you'll probably want to look at using some jQuery, e.g.:
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
}
else {
$('.menu').removeClass('fixed');
}
});
What this does is 'fix' the menu bar to the top of the page once you scroll past a certain point (e.g. 50px) by adding the CSS class 'fixed' to the .menu element, the fixed class would simply be e.g. the CSS above.
There are some nice examples listed here.
Source: Creating a sticky nav css and jquery
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
This is some content 0<br/>
This is some content 1<br/>
This is some content 2<br/>
This is some content 3<br/>
This is some content 4<br/>
This is some content 5<br/>
This is some content 6<br/>
This is some content 7<br/>
This is some content 8<br/>
<div id="data" />
</div>
CSS
* {
font-family: Consolas,Sans-serif;
font-size: 10pt;
}
#menu {
position: absolute;
width: 100%;
}
#menu.out {
position: fixed;
}
#menu ul {
margin: 0;
padding: 1em .5em;
list-style: none;
background-color: #fc9;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
padding: 5px .5em;
}
#content {
background-color: #ebebee;
padding: 4em 1em 1em;
height: 900px;
}
JQuery:
var menu = $("#menu");
var ul = menu.find("ul");
var content = $("#content")[0];
var data = $("#data");
var menuHeight = menu[0].getBoundingClientRect().bottom;
var inView= true;
$(document).scroll(function(evt) {
evt.preventDefault();
var top = content.getBoundingClientRect().top;
var nextInView = top+menuHeight > 0;
if (inView ^ nextInView)
{
data.append("<div>Switching.</div>")
inView = nextInView;
if (inView)
{
menu.removeClass("out");
}
else
{
menu.addClass("out");
ul.hide().slideDown("fast");
}
}
});
Fiddle :Demo
Courtesy : Robert Koritnik
Hope this helps
Happy Coding
I'd like to create a responsive left-hand menu, like the menu on Yahoo's Pure CSS site.
In other words, it should look like this on desktop:
And collapse like this on narrower screens:
Oddly, although this menu is prominent on the Pure site, it doesn't actually seem to be part of the Pure framework.
I've been struggling with the CSS to replicate it, looking at Yahoo's source - this is as far as I've got: http://jsfiddle.net/WZt4z/
It's part-way there, but I don't understand how they have styled the body of the page so it's in the right place, and got rid of the scrollbars on the menu.
Here is the HTML in the JSFiddle:
<a href="#menu" id="menuLink" class="pure-menu-link">
<img src="/img/navicon-png2x.png" width="20" alt="Menu toggle">
</a>
<div class="pure-u" id="menu"> <!-- contents of menu --> </div>
<div class="pure-u-1" id="main"> <!-- contents of body of page --> </div>
And the CSS:
#menu {
margin-top: 31px;
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 150px;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: grey;
overflow-y: auto;
-webkit-overflow-scroll: touch;
}
.pure-menu-link {
display: none; /* show this only on small screens */
top: 0;
left: 150px; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
padding: 0.75em 1em;
}
#media (max-width: 470px)
... responsive styles
You're running into problems because the side menu layout they built has multiple classes and ids that you are not including. Specifically you need the "layout" id:
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
Additionally for the menu to work properly you need to include the javascript for it:
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for(; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
menuLink.onclick = function (e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
};
}(this, this.document));
The javascript uses the ids to update the css when you hit the media breakpoint (screen gets too small) so if you don't have all the necessary ids ("layout", "menu", "menuLink") the javascript will break as well.
I updated the fiddle you posted with the necessary code (I pulled it straight from the site at purecss.io).
Here's the working fiddle: http://jsfiddle.net/schmanarchy/WZt4z/3/
I have a vertically displayed navigation menu. I would like a bullet point to appear to the left of the page currently being viewed. I've read a little bit about using background changes applied to li to indicate page, but I don't know how to apply that to using bullets.. Any ideas?
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>lookbook</li>
<li>services</li>
<li>contact</li>
<li>blog</li>
</ul>
</nav>
nav {
position: fixed;
right: 13%;
top: 65%;
}
nav ul li {
text-align: right;
}
http://jsfiddle.net/jtRws/
Update
Live examples of all proposed solutions
Working with AMC it was determined that a JavaScript solution would work better given the requirements. All content would appear on one page so the CSS solutions would not work based on my findings. I proposed the simple jQuery code to show a bullet when the link was clicked.
jQuery
$(window).load(function(event) {
$('a').click(function() {
$('#Nav li').removeClass();
$(this).parent().addClass("current");
});
});
CSS
#navcontainer3 ul {
width: 200px;
list-style-type:disc;
}
#navcontainer3 ul li {
color: #ccc;
float:right;
clear:right;
}
#navcontainer3 ul li.current {
color: #000;
}
This page contains examples of all the solutions but you'll find the jQuery solution alone at this link: http://jsfiddle.net/jtRws/10/.
Interesting problem. Obviously, there are JavaScript solutions, but it looks like you want a pure CSS solution.
Solution 0
Hide the other list item bullets by setting the list style color to the background color.
All pages will have the same navigation HTML but each page's <body> will have an id unique for that page. For example: <body id="home">, <body id="products">, etc. Then, using some clever CSS, the current page will obtain the specific styling definition (last def below).
#navcontainer0 ul {
width: 200px;
list-style-type:disc;
}
#navcontainer0 ul li {
color: #fff;
float:right;
clear:right;
}
body#home #homenav0,
body#products #prodnav0 {
color: #000;
}
Solution 1
Use background to show and hide the bullet image. Based on this article I used the following code. The article explains the technique in greater detail. Below you'll find the same code as the live example.
CSS
#navcontainer ul {
width: 200px;
padding:0;
margin:0;
text-align:right;
}
#navcontainer ul li a:hover {
color: #930;
background: #f5d7b4;
}
body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background:url(bullet.gif) 0 50% no-repeat no-repeat;
padding-left:15px;
}
Products Page
<body id="products">
<div id="navcontainer">
<ul id="navlist">
<li><a id="homenav" href="index.html">Home</a></li>
<li><a id="prodnav" href="products.html" >Products</a></li>
</ul>
</div>
</body>
I assume you're using anchors to navigate through page sections, so the only way I can think of right now is using javascript(jQuery).
I've updated your code example: http://tinyurl.com/a6ypyuz
In addition to #earthdesigner answer, if you don't want to add jquery then use this javascript instead:
http://jsfiddle.net/7uxcg/31/
window.onload = function() {
// var nav = document.getElementById('nav');
var nav = document.getElementsByTagName('NAV')[0].children[0];
for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == 'LI') {
li.onclick = function() {
changeClass(this.children[0].hash);
}
}
}
function changeClass(cur) {
var nav = document.getElementsByTagName('NAV')[0].children[0];
for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == 'LI' && li.children[0].hash == cur)
li.className = 'active';
else
li.className = ''
}
}
};
I understand that you want bullets only to current page. So first of all we're goind to eliminate normal bullets.
ul {list-style-type:none;}
Than i saw that you use id's for content divs on every page. Combining that with atribute selector here's an example of what you could do:
#home li a[href='#home']:before, #about li a[href='#about']:before {
content:"•";pointer-events:none; text-decoration:none;
}
I have a list, which length is variable,it could have 4 items or 30 items.
The issue is that this list is being rendered as a marquee, through a Javascript that is working, but items reach the screen width and then they pass to next line.
I want to have all the items on the same line, so then I could move the list to recreate the marquee effect.
<div class="submenu-container">
<div id="agrupador">
<ul style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;" class="submenu" id="moverlo">
<li> Item </li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
</ul>
</div>
</div>
.submenu-container {
background:#F0F7FF;
border-bottom:1px silver solid;
width: 100%;
overflow: hidden;
}
.submenu li {
display: inline-block;
margin-left:4px;
background:none;
*display: inline; /* IE */
float:left;
}
.submenu {
margin:0;
padding-top:8px;
padding-bottom:8px;
padding-left:0;
padding-right:0;
clear:none;
width:auto;
float:left;
}
And with javascript:
function ClonarAvisos(){
var width = alertSize(); // Usable window width
var xVarScreen = width - $('moverlo').getWidth();
alert($('moverlo').getWidth());
$('moverlo').setStyle({ width: $('moverlo').getWidth() + xVarScreen });
$('agrupador').setStyle({ width: $('moverlo').getWidth() * 2 });
var clon = Element.clone('moverlo', true);
clon.id = 'moverlo2';
$('agrupador').insert(clon);
}
function MoveNoticias(p) {
//Función que imita el comportamiento del Tag "marquee"
new Effect.Move('agrupador', {
x: -3,
y: 0,
mode: 'relative',
duration: 0.1,
afterFinish: function() {
var offSetDistance = $('agrupador').offsetLeft ;
offSetDistance = Math.abs(offSetDistance);
var gettingWidth = $('moverlo').getWidth() ;
if ( offSetDistance >= gettingWidth ) {
Element.setStyle('agrupador', {left: '0px' });
}
MoveNoticias();
}
});
}
I hope you understand what I am trying to do! Thanks!
Try removing the float: left from the li, and adding white-space: nowrap to the 'ul'.
I tried that here: http://jsfiddle.net/76d6p/
I am trying to decorate the vertical navigation menu using razor in one of my projects , i am trying to add style depending on the functionality with no success , the issue is i have subcategories and categories all in one table , thats why i have to call all the categories , subcategories within a one ul and then decorate them on hover , active , inactive etc. Below is the code, any ideas why the bold statement doesnt works.
<div class="listbox">
<ul class="">
#foreach (var category in Model)
{
<li class="#(category.IsActive ? "active" : "inactive")"
#if (category.NumberOfParentCategories > 0)
{
<text>style="background-image: url('/Content/images/cat-ul-li-list.png');border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px;
text-decoration: none;
padding-top: 4px;
padding-left: 15px;color:#5F9E95;min-height:27px;"</text>
}
**#if (category.NumberOfParentCategories > 0 && category.IsActive == true)
{
<text>style="background-image: url('/Content/images/cat-ul-li-active.png') !Important;"</text>**
}><a href="#Url.RouteUrl("Category", new { categoryId = category.Id, SeName = category.SeName })">#category.Name
</a>
</li><li class="separator"></li>
}
</ul>
</div>
Css:
.block-category-navigation .listbox ul .inactive
{
background-image: url('images/cat-rt-arrow.png');
background-repeat: no-repeat;
background-position: left center;
border-bottom-width: 1px;
border-bottom-color: #5F9E95;
border-bottom-style: solid;
padding-left:15px;
min-height:27px;
padding-top:8px;
}
.block-category-navigation .listbox ul li a:hover { color: #404041; }
.block-category-navigation .listbox ul{ background-image: url('images/cat-ul-active.png') !Important; padding-left:15px;min-height:27px; padding-top: 8px;}
The demonstartion can be seen on test website :Quadratech
Any suggestion or assistance will be appreciated, if this can be done using other methods like css and jquery. I have attached the image of what i am exactly looking for where Haemostasis is the category selected below is the subcategories for haem.. with the subcategory resistance active, and right down the bottom are the other inactive categories.
:
You add two style attributes to your tag.
I would combine them into one.
And cleanup the generation for the LI tag a bit. By first doing the test, and storing the result in some variables:
const string STYLEBASE= "border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px;
text-decoration: none;
padding-top: 4px;
padding-left: 15px;color:#5F9E95;min-height:27px;";
var style = "";
var backgroundimage = "";
if (category.NumberOfParentCategories > 0) {
backgroundimage = "background-image: url('/Content/images/cat-ul-li-list.png');";
style = STYLEBASE;
}
if (category.NumberOfParentCategories > 0 && category.IsActive == true) {
// override the background image
backgroundimage = "background-image: url('/Content/images/cat-ul-li-active.png');
}
<li class="#(category.IsActive ? "active" : "inactive")" style="#Html.Raw(style + " " + backgroundimage)" >