Tab menu

General chit chat about razor, not specifically related to a topic but about razorCMS

Tab menu

Postby mariuss » Wed May 25, 2011 9:04 am

Hi,

Is it possible a tab menu like this one: http://clagnut.com/sandbox/csstabs/?writingtext=csstabs ?

Marius
mariuss
 
Posts: 2
Joined: Wed May 25, 2011 8:46 am

Re: Tab menu

Postby markfoz » Wed May 25, 2011 10:56 am

Yes I think it is. The example is just a standard 2 level unordered list which razorcms will read as being the subcategory level. You are limited only by your own css. I think later releases of Razor CMS had #nav (<ul id="nav">) appended to the list first item (which was a request by me for working with jquery menus and others where a ul id has to be applied)

Try changing in all the styles in the example: 'globalnav' to just 'nav' you should then have css which will work with razorcms menu system.
create subcategory in razor cms under its parent link for the bottom links, add the bottom links to that subcategory level.

One thing to be careful of though with the above as nav is appended to all menu lists you may get the exact menu css dupliacted in any side nav and footer nav - my workaround make the same pages but name them slightly different and apply these to the other menu areas - not the best solution but it works ok.
markfoz
 
Posts: 113
Joined: Sun Aug 09, 2009 2:41 pm

Re: Tab menu

Postby smiffy6969 » Fri May 27, 2011 11:35 am

Yes more than possible, at present it has support for nested menus, in your css you just need to float your <li> tags and set the <ul> to inline i think.

smiffy
smiffy6969
 
Posts: 1866
Joined: Sat May 24, 2008 8:18 am
Location: Loughborough, UK

Re: Tab menu

Postby mariuss » Tue May 31, 2011 9:33 am

I tried to make this work but it didn't, so I paste here my barebone template and the css I tested and maybe you guys get me some ideas.

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><?php loadSettings('sitename'); ?> &#126; <?php loadPageTitle(); ?></title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <?php BsocketB('public-xhtml-head1'); ?>
    <link rel="stylesheet" type="text/css" href="<?php cssLocation(); ?>" />
    <?php BsocketB('public-xhtml-head2'); ?>
</head>
<body>
    <div id="pageframe">
        <div id="topnav">
            <?php loadLinks('top-navigation'); ?>
            <?php BsocketB('public-xhtml-topnav'); ?>
        </div>
        <div id="midbox">
            <div id="content">
                <?php loadSlabContents(); ?>
                <?php BsocketB('public-xhtml-content'); ?>
            </div>
        </div>
        <div id="footer">
            <div id="footnav">
                <?php loadLinks('footer'); ?>
                <?php loadSettings('copyright'); ?>
                <?php BsocketB('public-xhtml-footer'); ?>
            </div>
        </div>
    </div>
<?php BsocketB('public-xhtml-endofdoc'); ?> 
</body>
</html>


the css:

Code: Select all
body {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
}

/*topnav*/
/*topnav*/

#topnav {
   position:relative;
   float:left;
   width:100%;
   padding:0 0 1.75em 1em;
   margin:0;
   list-style:none;
   line-height:1em;
}

#topnav LI {
   float:left;
   margin:0;
   padding:0;
}

#topnav A {
   display:block;
   color:#444;
   text-decoration:none;
   font-weight:bold;
   background:#ddd;
   margin:0;
   padding:0.25em 1em;
   border-left:1px solid #fff;
   border-top:1px solid #fff;
   border-right:1px solid #aaa;
}

#topnav A:hover,
#topnav A:active,
#topnav A.active:link,
#topnav A.active:visited {
   background:#bbb;
}

#topnav A.active:link,
#topnav A.active:visited {
   position:relative;
   z-index:102;
}

/*subnav*/

#topnav UL {
   position:relative;
   left:0;
   top:1.5em;
   float:left;
   background:#bbb;
   width:100%;
   margin:0;
   padding:0.25em 0.25em 0.25em 1em;
   list-style:none;
   border-top:1px solid #fff;
}

#topnav UL LI {
   float:left;
   display:block;
   margin-top:1px;
}

#topnav UL A {
   background:#bbb;
   color:#fff;
   display:inline;
   margin:0;
   padding:0 1em;
   border:0
}

#topnav UL A:hover,
#topnav UL A:active,
#topnav UL A.active:link,
#topnav UL A.active:visited {
   color:#444;
}

#midbox {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    min-height:200px;
    height:auto !important;
    height:200px;
    width: 948px;
    background-color: #ffffff;
    position:relative;
    float: left;
    top:6.5em;
}


You can check the result here: http://abysslinux.dyndns.info/razor/
The main issue is that I don't know how to hide the sub links that aren't yet active, like in a normal tab based menu (the "learning center" sublink from "projects", for example).

Thanks
mariuss
 
Posts: 2
Joined: Wed May 25, 2011 8:46 am

Re: Tab menu

Postby smiffy6969 » Sat Jun 04, 2011 10:21 pm

That link isn't going anywhere.

smiffy
smiffy6969
 
Posts: 1866
Joined: Sat May 24, 2008 8:18 am
Location: Loughborough, UK

Re: Tab menu

Postby mathias » Wed Jul 13, 2011 2:38 pm

I have drop down menus and left-aligned pop-out menus on my RazorCMS site:

http://www.degrijzekat.be/

It's all about writing your CSS correctly. Very tedious.
mathias
 
Posts: 28
Joined: Wed Feb 16, 2011 10:53 am

Re: Tab menu

Postby zyrabontia » Fri Oct 05, 2012 3:48 am

CSS codes are really a pain in the head.


______________________
Whew! Please do visit my own personal blog site
zyrabontia
 
Posts: 1
Joined: Fri Oct 05, 2012 1:45 am


Return to General Discussions



Who is online

Users browsing this forum: No registered users and 1 guest

cron