first base on navigation rework, less obtrusive, icons need to be updated, settings moved

This commit is contained in:
Jan-Christoph Borchardt 2012-10-26 23:38:36 +02:00
parent 46871e9b2e
commit 3eea7aac13
7 changed files with 66 additions and 89 deletions

View File

@ -82,8 +82,8 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
.selectedActions a img { position:relative; top:.3em; }
/* add breadcrumb divider to the File item in navigation panel */
#navigation>ul>li:first-child { background:url('%webroot%/core/img/breadcrumb-start.svg') no-repeat 12.5em 0px; width:12.5em; padding-right:1em; position:fixed; }
#navigation>ul>li:first-child+li { padding-top:2.9em; }
#navigation>ul>li:first-child { background:url('%webroot%/core/img/breadcrumb-start.svg') no-repeat 65px 0; width:65px; padding-right:1em; position:fixed; }
#navigation>ul>li:first-child+li { padding-top:68px; }
#scanning-message{ top:40%; left:40%; position:absolute; display:none; }

View File

@ -58,7 +58,7 @@ input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text-
/* CONTENT ------------------------------------------------------------------ */
#controls { padding: 0 0.5em; width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; }
#controls .button { display:inline-block; }
#content { top: 3.5em; left: 12.5em; position: absolute; }
#content { top: 3.5em; left: 65px; position: absolute; }
#leftcontent, .leftcontent { position:fixed; overflow: auto; top:6.4em; width:20em; background:#f8f8f8; border-right:1px solid #ddd; }
#leftcontent li, .leftcontent li { background:#f8f8f8; padding:.5em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 200ms; -moz-transition:background-color 200ms; -o-transition:background-color 200ms; transition:background-color 200ms; }
#leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; }
@ -95,14 +95,15 @@ label.infield { cursor: text !important; }
/* NAVIGATION ------------------------------------------------------------- */
#navigation { position:fixed; top:3.5em; float:left; width:12.5em; padding:0; z-index:75; height:100%; background:#eee; border-right: 1px #ccc solid; -moz-box-shadow: -3px 0 7px #000; -webkit-box-shadow: -3px 0 7px #000; box-shadow: -3px 0 7px #000; overflow:hidden;}
#navigation a { display:block; padding:.6em .5em .4em 2.5em; background:#eee 1em center no-repeat; border-bottom:1px solid #ddd; border-top:1px solid #fff; text-decoration:none; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; }
#navigation a.active, #navigation a:hover, #navigation a:focus { background-color:#dbdbdb; border-top:1px solid #d4d4d4; border-bottom:1px solid #ccc; color:#333; }
#navigation a.active { background-color:#ddd; }
#navigation { position:fixed; top:3.5em; float:left; width:65px; padding:0; z-index:75; height:100%; background:#30343a url('../img/noise.png') repeat; border-right: 1px #ccc solid; -moz-box-shadow: -3px 0 7px #000; -webkit-box-shadow: -3px 0 7px #000; box-shadow: -3px 0 7px #000; overflow:hidden;}
#navigation a { display:block; padding:4px; background:transparent; text-decoration:none; font-size:10px; text-align:center; color:#000; text-shadow:#444 0 1px 0; }
#navigation li:first-child { padding-top:8px; }
#navigation a img { display:block; width:32px; height:32px; margin:0 auto; }
#navigation a.active, #navigation a:hover, #navigation a:focus { color:#888; text-shadow:#000 0 -1px 0; }
#navigation a.active { }
#navigation #settings { position:absolute; bottom:3.5em; width:100%; }
#navigation #settings img { width:32px; height:32px; }
#expand { position:relative; z-index:100; margin-bottom:-.5em; padding:.5em 10.1em .7em 1.2em; cursor:pointer; }
#expand+span { position:absolute; z-index:99; margin:-1.7em 0 0 2.5em; font-size:1.2em; color:#666; text-shadow:#f8f8f8 0 1px 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; }
#expand:hover+span, #expand+span:hover { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; cursor:pointer; }
/* VARIOUS REUSABLE SELECTORS */
.hidden { display:none; }

BIN
core/img/noise.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 930 KiB

View File

@ -14,8 +14,8 @@
width="16"
height="16"
id="svg11300"
inkscape:version="0.48.1 r9760"
sodipodi:docname="help.svg"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="home.svg"
inkscape:export-filename="/home/jancborchardt/jancborchardt/ownCloud/icons/help.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
@ -41,16 +41,16 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="776"
inkscape:window-height="800"
id="namedview24"
showgrid="true"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="22.627418"
inkscape:cx="14.025105"
inkscape:cy="9.2202448"
inkscape:cy="3.9169442"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-y="-31"
inkscape:window-maximized="1"
inkscape:current-layer="g4146">
<inkscape:grid
@ -1733,16 +1733,6 @@
style="stop-color:#363636;stop-opacity:1"
offset="1" />
</linearGradient>
<linearGradient
y2="18.967093"
x2="-2.4040222"
y1="4.4573336"
x1="-2.4040222"
gradientTransform="translate(13.927091,16.573387)"
gradientUnits="userSpaceOnUse"
id="linearGradient3475"
xlink:href="#linearGradient3587-6-5-26"
inkscape:collect="always" />
</defs>
<g
transform="matrix(0.78786264,0,0,0.78786264,-3.1483699,0.44173984)"
@ -1761,19 +1751,14 @@
style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
<g
id="g4146">
<g
id="g4550"
transform="translate(0,-20)">
<path
inkscape:connector-curvature="0"
d="M 8,22.03072 0,30 l 3,0 0,6 10,0 0,-6 3,0 L 13,26.969459 13,23 l -3.0000001,0 0,1.081152 L 8,22.03072 z"
id="path3887"
style="opacity:0.6;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
inkscape:connector-curvature="0"
d="M 8,21.03072 0,29 l 3,0 0,6 10,0 0,-6 3,0 L 13,25.969459 13,22 l -3.0000001,0 0,1.081152 L 8,21.03072 z"
id="path3883"
style="opacity:0.7;fill:url(#linearGradient3475);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
</g>
<path
style="opacity:0.9;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="M 8 0.53125 L 0 8.5 L 0.5 8.5 L 8 1.03125 L 10 3.09375 L 10 2.59375 L 8 0.53125 z M 10 1.5 L 10 2 L 13 2 L 13 1.5 L 10 1.5 z M 13 5.46875 L 13 5.96875 L 15.5 8.5 L 16 8.5 L 13 5.46875 z "
id="path5338" />
<path
style="opacity:0.20000000000000001;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="path3883"
d="M 8,1.03072 0,9 3,9 3,15 13,15 13,9 16,9 13,5.969459 13,2 10,2 10,3.081152 8,1.03072 z"
inkscape:connector-curvature="0" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -14,8 +14,8 @@
width="16"
height="16"
id="svg11300"
inkscape:version="0.48.1 r9760"
sodipodi:docname="search.svg"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="music.svg"
inkscape:export-filename="/home/jancborchardt/jancborchardt/ownCloud/icons/search.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
@ -41,7 +41,7 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="776"
inkscape:window-height="800"
id="namedview24"
showgrid="true"
showguides="true"
@ -50,7 +50,7 @@
inkscape:cx="-2.2078397"
inkscape:cy="6.5568429"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-y="-31"
inkscape:window-maximized="1"
inkscape:current-layer="svg11300">
<inkscape:grid
@ -1628,17 +1628,12 @@
id="linearGradient3374"
xlink:href="#linearGradient4136-9"
inkscape:collect="always" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4136-9"
id="linearGradient3457"
gradientUnits="userSpaceOnUse"
spreadMethod="pad"
x1="9"
y1="0"
x2="9"
y2="15" />
</defs>
<path
style="opacity:0.1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path5404"
d="M 13.36218,0.50108254 C 11.005077,0.88091754 7.850551,1.2719285 5.5,1.6729766 c -0.622438,0.303692 -0.482505,1.085702 -0.510043,1.653123 0,2.531942 0,5.063885 0,7.5958254 -1.311726,-0.246608 -2.911355,0.837272 -2.980733,2.553423 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 C 5.71837,15.543589 6.979991,14.319733 7,12.771952 6.97986,10.172547 7.0057,7.5721166 7,4.9723096 c 0.285577,-0.02115 4.611029,-0.846503 4.999999,-0.901457 0,1.947147 0,3.894295 0,5.8414424 -1.146387,-0.274636 -2.611896,0.478721 -2.975268,2.017251 -0.15337,0.862385 0.136496,1.944831 1.011545,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661704 0.02169,-6.9337614 0,-10.4003045 C 13.949347,0.84240254 13.7286,0.47756852 13.36218,0.50108254 z"
inkscape:connector-curvature="0" />
<g
transform="matrix(0.78786264,0,0,0.78786264,-3.1483699,0.44173984)"
id="g3743-3"
@ -1654,17 +1649,9 @@
transform="matrix(0.99998873,0,0,0.99998873,-3.996044,-20.001608)"
id="g3743-9-4"
style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
<g
id="g4146">
<path
style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
id="path4031"
d="m 13.36218,1.0010808 c -2.357103,0.379835 -5.5116295,0.770846 -7.8621805,1.1718941 -0.622438,0.303692 -0.482505,1.085702 -0.510043,1.653123 0,2.531942 0,5.063885 0,7.5958261 -1.311726,-0.246608 -2.911355,0.837273 -2.980733,2.553424 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 1.844664,0.04478 3.106285,-1.179076 3.126294,-2.726857 -0.02014,-2.599407 0.0057,-5.1998371 0,-7.7996441 0.285577,-0.02115 4.6110295,-0.846503 4.9999995,-0.901457 0,1.947147 0,3.894295 0,5.8414421 -1.146387,-0.274636 -2.6118965,0.478721 -2.9752685,2.017253 -0.15337,0.862385 0.136496,1.944831 1.0115455,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661721 0.02169,-6.9337631 0,-10.4003062 C 13.949347,1.3424008 13.7286,0.97756684 13.36218,1.0010808 z"
inkscape:connector-curvature="0" />
<path
style="opacity:0.7;fill:url(#linearGradient3457);fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path4031-1"
d="m 13.36218,0.00108226 c -2.357103,0.379835 -5.5116293,0.770846 -7.8621803,1.17189404 -0.6224381,0.303692 -0.4825051,1.085702 -0.5100431,1.653123 0,2.531942 0,5.063885 0,7.5958257 -1.3117261,-0.246608 -2.9113551,0.837272 -2.9807331,2.553423 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 1.8446642,0.04478 3.1062852,-1.179076 3.1262942,-2.726857 -0.02014,-2.5994053 0.0057,-5.1998357 0,-7.7996427 0.285577,-0.02115 4.6110293,-0.846503 4.9999993,-0.901457 0,1.947147 0,3.894295 0,5.8414424 -1.146387,-0.274636 -2.6118963,0.478721 -2.9752683,2.0172513 -0.15337,0.862385 0.136496,1.944831 1.0115453,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661707 0.02169,-6.9337617 0,-10.40030474 -0.04486,-0.325758 -0.265607,-0.69059202 -0.632027,-0.667078 z"
inkscape:connector-curvature="0" />
</g>
<path
inkscape:connector-curvature="0"
d="M 13.36218,0.00108226 C 11.005077,0.38091726 7.850551,0.77192826 5.5,1.1729763 c -0.622438,0.303692 -0.482505,1.085702 -0.510043,1.653123 0,2.531942 0,5.063885 0,7.5958257 -1.311726,-0.246608 -2.911355,0.837272 -2.980733,2.553423 -0.113252,1.068438 0.834207,1.998453 1.864482,2.023461 C 5.71837,15.043589 6.979991,13.819733 7,12.271952 6.97986,9.6725467 7.0057,7.0721163 7,4.4723093 c 0.285577,-0.02115 4.611029,-0.846503 4.999999,-0.901457 0,1.947147 0,3.894295 0,5.8414424 -1.146387,-0.274636 -2.611896,0.478721 -2.975268,2.0172513 -0.15337,0.862385 0.136496,1.944831 1.011545,2.309984 1.708237,0.784936 4.053268,-0.805037 3.957931,-2.671065 -0.02646,-3.4661707 0.02169,-6.9337617 0,-10.40030474 -0.04486,-0.325758 -0.265607,-0.69059202 -0.632027,-0.667078 z"
id="path4031-1"
style="opacity:0.7;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</svg>

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB

View File

@ -14,8 +14,8 @@
width="16"
height="16"
id="svg11300"
inkscape:version="0.48.1 r9760"
sodipodi:docname="audio.svg"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="picture.svg"
inkscape:export-filename="/home/jancborchardt/jancborchardt/ownCloud/icons/audio.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
@ -27,7 +27,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@ -41,7 +41,7 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="776"
inkscape:window-height="800"
id="namedview24"
showgrid="true"
showguides="true"
@ -50,7 +50,7 @@
inkscape:cx="14.025105"
inkscape:cy="9.2202448"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-y="-31"
inkscape:window-maximized="1"
inkscape:current-layer="g4146">
<inkscape:grid
@ -1677,21 +1677,17 @@
style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
<g
id="g4146">
<g
transform="translate(-39.999799,1)"
id="g3376">
<path
sodipodi:nodetypes="cccccccccccccc"
inkscape:connector-curvature="0"
id="path4160-9-9-0"
d="m 43.35011,1.0020512 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 l -3.07e-4,13.1230708 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 l 3.07e-4,-12.9606108 c -3.29e-4,-0.336436 -0.265499,-0.601856 -0.516871,-0.599899 0,0 -7.760335,0 -10.134913,0 z M 44,11 l 9,0 4.13e-4,3 L 44,14 z"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.6;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992162;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
<path
sodipodi:nodetypes="cccccccccccccc"
inkscape:connector-curvature="0"
id="path4160-9-9-8"
d="m 43.35011,0.0020508 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 l -3.07e-4,13.1230712 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 L 54.001894,0.6019496 C 54.001565,0.265514 53.736395,9.38e-5 53.485023,0.0020508 c 0,0 -7.760335,0 -10.134913,0 z M 44,10 l 9,0 4.13e-4,3 L 44,13 z"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.7;color:#000000;fill:url(#linearGradient3397);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992162;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
</g>
<path
sodipodi:nodetypes="cccccccccccccc"
inkscape:connector-curvature="0"
id="path5740"
d="m 3.350311,1.5020508 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 L 3,15.062561 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 L 14.002095,2.1019496 C 14.001766,1.765514 13.736596,1.5000938 13.485224,1.5020508 c 0,0 -7.760335,0 -10.134913,0 z M 4.000201,11.5 l 9,0 4.13e-4,3 -9.000413,0 z"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.1;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992161999999996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
<path
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.69999999999999996;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99992161999999996;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
d="m 3.350311,1.0020508 c -0.197474,0.03825 -0.35356,0.233327 -0.350004,0.437439 L 3,14.562561 c 4e-6,0.229041 0.205223,0.437433 0.430774,0.437439 l 10.14024,0 c 0.225551,-6e-6 0.430768,-0.208398 0.430774,-0.437439 L 14.002095,1.6019496 C 14.001766,1.265514 13.736596,1.0000938 13.485224,1.0020508 c 0,0 -7.760335,0 -10.134913,0 z M 4.000201,11 l 9,0 4.13e-4,3 -9.000413,0 z"
id="path4160-9-9-8"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccc" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

View File

@ -44,17 +44,25 @@
<nav><div id="navigation">
<ul id="apps" class="svg">
<?php foreach($_['navigation'] as $entry): ?>
<li data-id="<?php echo $entry['id']; ?>"><a style="background-image:url(<?php echo $entry['icon']; ?>)" href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>><?php echo $entry['name']; ?></a>
<li data-id="<?php echo $entry['id']; ?>">
<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
<img src="<?php echo $entry['icon']; ?>">
<?php echo $entry['name']; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<ul id="settings" class="svg">
<img role=button tabindex=0 id="expand" class="svg" alt="<?php echo $l->t('Settings');?>" src="<?php echo image_path('', 'actions/settings.svg'); ?>" />
<span><?php echo $l->t('Settings');?></span>
<div id="expanddiv" <?php if($_['bodyid'] == 'body-user') echo 'style="display:none;"'; ?>>
<?php foreach($_['settingsnavigation'] as $entry):?>
<li><a style="background-image:url(<?php echo $entry['icon']; ?>)" href="<?php echo $entry['href']; ?>" title="" <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>><?php echo $entry['name'] ?></a></li>
<li>
<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
<img src="<?php echo $entry['icon']; ?>">
<?php echo $entry['name'] ?>
</a>
</li>
<?php endforeach; ?>
</div>
</ul>