This might seem like a daft question but its been a long day and i can't quite figure this one out.
I have started with the business package and umedia skin but i want to be able to change the top menu (topnav) to a new menu i've got from a menu gen on the net but i can't seem to get it to work properly and i am concerned for the macro/xslt currently used to auto update the menu when i add a new page in the content section.
Has anyone else done this before, can you give any advice?
Might be interesting to give some more info on that "new menu" from the menu generator, how it's integrated in your admin site and what xslt you've got so far (even tho you're probably using a default one that comes with the starter kit). Can you provide this info so we can offer some more specific help?
NOOB ALERT!! Changing the top menu (topnav)
Afternoon all,
This might seem like a daft question but its been a long day and i can't quite figure this one out.
I have started with the business package and umedia skin but i want to be able to change the top menu (topnav) to a new menu i've got from a menu gen on the net but i can't seem to get it to work properly and i am concerned for the macro/xslt currently used to auto update the menu when i add a new page in the content section.
Has anyone else done this before, can you give any advice?
Thanks in advance
Dominic,
Might be interesting to give some more info on that "new menu" from the menu generator, how it's integrated in your admin site and what xslt you've got so far (even tho you're probably using a default one that comes with the starter kit). Can you provide this info so we can offer some more specific help?
Cheers,
/Dirk
Hi,
sorry, i'll give you some info now. Thanks
Menu gen info:
INSTALLATION INSTRUCTIONS
1) Upload the "Menu" folder to the root directory of your website.
2) Copy and paste the code below to the desired spot in your site.
<head>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<ul class="menu red">
<li class="current"><a href="" target="_self">Homepage</a></li>
</ul>
The menu folder has 1 image and a CSS file that contains:
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
Umbraco xslt:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="msxml umbraco.library">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:param name="currentPage"/>
<!-- Input the documenttype you want here -->
<xsl:variable name="level" select="1"/>
<xsl:template match="/">
<ul id="topNavigation">
<ul class="menu red">
</ul>
<li class="home">
<xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
<xsl:attribute name="class">home current</xsl:attribute>
</xsl:if>
<a href="/">Home</a>
</li>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
<li>
<xsl:if test="@id = $currentPage/@id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
<span><xsl:value-of select="@nodeName"/></span>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
Umbraco CSS
#header #mainmenu{
height:50px;
position:relative;
bottom:119px;
width:960px;
background-color: #000;
}
#header #mainmenu ul{
width: 985px;
position:relative;
top:10px;
padding: 0px;
margin: 0 auto;
height:auto;
}
#header #mainmenu ul li{
list-style: none;
background-color:#000;
background-position: right bottom;
background-repeat: no-repeat;
float: left;
font-size: 14px;
}
#header #mainmenu ul li a{
padding: 15px 20px;
display: block;
color: #A9A9A9;
text-decoration: none;
padding-bottom: 28px;
}
#header #mainmenu ul li.current{
background-color: #000;
position:relative;
top:20px;
}
#header ul li.home a{
background-image: url(/images/icons/home_dark.png);
background-position: 16px 16px;
background-repeat: no-repeat;
}
#header #mainmenu ul li:hover{
color: #FFF;
text-decoration: none;
background-color: #FF1493;
margin: 0 auto;
}
hope this is what you need, thanks again!!
is working on a reply...